Merge pull request 'feature/shop' (#4) from feature/shop into develop

Reviewed-on: #4

assets/svg/gem.svg

@@ -0,0 +1,51 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.60235 19.1578C2.89883 19.064 2.28911 18.6419 2.0077 17.9853C1.21038 16.0623 -0.384279 11.6066 0.0847364 8.13593C0.600654 4.29 9.41815 1.05379 12.1384 0.115761C12.6544 -0.071845 13.1703 -0.024943 13.6393 0.209565L18.9392 2.88296C19.7365 3.25817 20.1117 4.1493 19.971 4.99353C19.4551 7.62002 18.2356 13.2013 16.7817 15.9685C15.1401 19.1578 6.83856 19.533 3.60235 19.1578Z" fill="url(#paint0_linear_1_11370)"/>
+<path opacity="0.81" d="M12.8424 1.19407C1.53914 4.43028 0.178991 8.93283 3.88422 16.3433C4.02492 16.6247 4.30633 16.8123 4.58774 16.8592C7.26113 17.0937 14.7654 16.4371 15.5627 14.561C17.9078 10.4806 18.4237 3.86746 13.499 1.28787C13.3114 1.14716 13.0769 1.14717 12.8424 1.19407Z" fill="#6EF3FF"/>
+<path d="M15.5622 16.6713C15.5622 16.6713 11.6694 13.1536 11.0128 12.2156C10.3562 11.2776 12.5605 7.05644 12.5605 7.05644C12.5605 7.05644 17.1569 4.71136 19.2206 3.96094C19.2675 4.00784 19.2675 11.8873 15.5622 16.6713Z" fill="#368ADD"/>
+<path d="M0.270476 8.32422C0.270476 8.32422 -0.479949 12.0763 2.33415 18.2674C2.33415 18.2674 2.56866 13.2489 2.28725 11.9356C2.00584 10.6693 0.270476 8.32422 0.270476 8.32422Z" fill="#368ADD"/>
+<path d="M3.83768 4.19537C3.83768 4.19537 2.10232 5.0396 3.83768 5.41481C5.57304 5.79002 12.3269 6.72805 12.3269 6.72805C12.3269 6.72805 16.5949 5.1803 19.1276 3.44494C19.1276 3.44494 14.0622 0.724652 12.8428 0.255636C11.6233 -0.213379 3.83768 4.19537 3.83768 4.19537Z" fill="#6EFFFF"/>
+<path opacity="0.8" d="M2.382 11.607C1.72538 10.6689 2.05369 7.38583 3.74214 5.50977C3.74214 5.50977 9.08892 6.11949 12.2782 7.01062C12.2782 7.01062 10.7774 11.607 10.5898 12.1698C10.4491 12.6857 2.382 11.607 2.382 11.607Z" fill="url(#paint1_linear_1_11370)"/>
+<path opacity="0.9" d="M19.1728 3.44531C19.1728 3.44531 11.903 6.54082 11.2933 6.25941C8.05711 4.28954 3.78906 5.8842 3.78906 5.8842C8.33852 6.58772 12.3252 7.05674 12.3252 7.05674C12.2783 7.00984 12.2313 6.96293 12.2313 6.96293L12.3721 7.00984L19.1728 3.44531Z" fill="#6EFFFF"/>
+<path d="M2.382 11.607C1.72538 10.6689 2.05369 7.38583 3.74214 5.50977C3.74214 5.50977 9.08892 6.11949 12.2782 7.01062C12.2782 7.01062 10.6836 7.66724 7.77568 8.79288C4.86778 9.87161 2.382 11.607 2.382 11.607Z" fill="url(#paint2_linear_1_11370)"/>
+<path d="M6.1834 3.21108C8.15327 1.89783 11.7647 0.25628 12.6558 0.53769C13.547 0.819099 17.1115 2.46065 16.9239 2.74206C16.7363 3.02347 3.93213 4.71193 6.1834 3.21108Z" fill="url(#paint3_linear_1_11370)"/>
+<path opacity="0.55" d="M12.6522 13.7165C13.215 13.951 15.8415 16.0616 15.3725 16.6244C14.5283 17.5624 11.2452 18.7819 9.6974 18.5004C9.5098 18.4535 12.0425 13.4351 12.6522 13.7165Z" fill="#0978FF"/>
+<path opacity="0.5" d="M19.2656 4.00781C19.5001 5.50866 18.8435 9.4484 18.5152 10.574C18.1869 11.6997 15.279 17.1872 15.3728 16.6243C15.4666 16.0615 14.2002 15.6394 14.294 15.4049C17.3895 7.71304 16.4046 5.32106 16.9205 5.03965C18.14 4.42993 19.2656 4.00781 19.2656 4.00781Z" fill="#368ADD"/>
+<path d="M12.3242 6.72915C12.3242 6.72915 18.7497 3.49294 19.1249 3.44603C19.5002 3.39913 15.9356 5.65041 14.7162 6.16633C13.5437 6.68225 12.3242 6.72915 12.3242 6.72915Z" fill="#DBFFFF"/>
+<path d="M9.04297 12.3566C9.04297 12.3566 9.8872 11.8876 10.3093 11.5593C10.7783 11.1841 11.0128 10.6682 11.2004 10.2461C11.5288 9.49562 11.0128 12.169 10.919 12.2159C10.8252 12.3097 9.04297 12.3566 9.04297 12.3566Z" fill="#DBFFFF"/>
+<path d="M9.93327 1.19441C9.93327 1.19441 9.74567 1.42891 10.543 1.28821C11.3872 1.1475 11.7155 0.631585 11.7155 0.631585C11.7155 0.631585 10.7306 0.537784 9.93327 1.19441Z" fill="#DBFFFF"/>
+<path d="M3.41565 6.02613C3.18114 6.11993 3.04043 5.135 3.18114 5.04119C3.32184 4.99429 4.21297 5.2288 4.54128 5.46331C4.77579 5.69782 3.41565 6.02613 3.41565 6.02613Z" fill="#DBFFFF"/>
+<path d="M10.6367 12.123C10.6367 12.123 12.9818 15.1717 15.5614 16.6725C15.5614 16.6725 14.7641 14.515 10.6367 12.123Z" fill="#6EFFFF"/>
+<path opacity="0.5" d="M4.39844 18.6425C8.90099 18.9239 15.9362 16.2505 15.2796 16.8603C14.623 17.47 11.9965 18.9239 9.55761 19.0646C7.07183 19.2522 4.39844 18.6425 4.39844 18.6425Z" fill="#368AC5"/>
+<path d="M4.02283 11.6995C2.66268 11.465 2.05296 9.16685 2.33437 8.27572C2.61578 7.38459 1.49014 9.82347 2.38127 11.6057L2.24057 11.934C2.24057 11.934 1.91226 15.4517 2.28747 18.2658C2.28747 18.2658 3.1317 17.1401 2.52198 13.3411C2.52198 13.2473 2.47508 13.1535 2.47508 13.1066C2.33437 12.1216 3.03789 12.0747 3.3662 12.2624C4.30423 12.8252 5.71128 13.5756 6.64931 13.5756C8.15016 13.5756 11.0112 12.2624 11.0112 12.2624C10.3545 12.0278 6.36791 11.7933 4.02283 11.6995Z" fill="#6EFFFF"/>
+<path opacity="0.5" d="M0.412846 10.7622C0.459748 8.69852 2.28891 17.0001 2.38271 17.7505C2.42961 18.5479 0.272142 15.0771 0.412846 10.7622Z" fill="#368ADD"/>
+<path d="M0.132812 7.80859C0.132812 7.80859 1.53986 9.35635 2.19648 11.7014C2.19648 11.7014 0.320419 10.0599 0.132812 7.80859Z" fill="#6EFFFF"/>
+<defs>
+<linearGradient id="paint0_linear_1_11370" x1="7.03013" y1="2.15038" x2="14.073" y2="18.0578" gradientUnits="userSpaceOnUse">
+<stop offset="0.0596701" stop-color="#078ABB"/>
+<stop offset="0.6367" stop-color="#279EFF"/>
+<stop offset="0.7155" stop-color="#30A4FF"/>
+<stop offset="0.8434" stop-color="#48B4FF"/>
+<stop offset="1" stop-color="#6ECDFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_11370" x1="2.59993" y1="7.45904" x2="11.158" y2="10.7647" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6EFFFF"/>
+<stop offset="1" stop-color="#6ECDFF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1_11370" x1="5.35097" y1="4.79642" x2="7.38285" y2="9.38581" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4DFFFF"/>
+<stop offset="0.1035" stop-color="#47EDED"/>
+<stop offset="0.3119" stop-color="#39BDBD"/>
+<stop offset="0.6065" stop-color="#227070"/>
+<stop offset="0.9729" stop-color="#020808"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1_11370" x1="6.85422" y1="1.12889" x2="16.1794" y2="4.73082" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4DFFFF"/>
+<stop offset="0.1035" stop-color="#47EDED"/>
+<stop offset="0.3119" stop-color="#39BDBD"/>
+<stop offset="0.6065" stop-color="#227070"/>
+<stop offset="0.9729" stop-color="#020808"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+</svg>

assets/svg/icon_info.svg

@@ -0,0 +1,10 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_10839)">
+<path d="M10.5 15.75C10.7975 15.75 11.047 15.6492 11.2486 15.4476C11.4502 15.246 11.5507 14.9968 11.55 14.7V10.5C11.55 10.2025 11.4492 9.9533 11.2476 9.7524C11.046 9.5515 10.7968 9.4507 10.5 9.45C10.2032 9.4493 9.95399 9.5501 9.75239 9.7524C9.5508 9.9547 9.45 10.2039 9.45 10.5V14.7C9.45 14.9975 9.5508 15.247 9.75239 15.4486C9.95399 15.6502 10.2032 15.7507 10.5 15.75ZM10.5 7.35C10.7975 7.35 11.047 7.2492 11.2486 7.0476C11.4502 6.846 11.5507 6.5968 11.55 6.3C11.5493 6.0032 11.4485 5.754 11.2476 5.5524C11.0467 5.3508 10.7975 5.25 10.5 5.25C10.2025 5.25 9.95329 5.3508 9.75239 5.5524C9.5515 5.754 9.4507 6.0032 9.45 6.3C9.4493 6.5968 9.5501 6.84635 9.75239 7.04865C9.95469 7.25095 10.2039 7.3514 10.5 7.35ZM10.5 21C9.0475 21 7.6825 20.7242 6.405 20.1726C5.1275 19.621 4.01625 18.873 3.07125 17.9287C2.12625 16.9844 1.3783 15.8732 0.827401 14.595C0.276501 13.3168 0.000701329 11.9518 1.32911e-06 10.5C-0.00069867 9.0482 0.275101 7.6832 0.827401 6.405C1.3797 5.1268 2.12765 4.01555 3.07125 3.07125C4.01485 2.12695 5.1261 1.379 6.405 0.8274C7.6839 0.2758 9.0489 0 10.5 0C11.9511 0 13.3161 0.2758 14.595 0.8274C15.8739 1.379 16.9851 2.12695 17.9287 3.07125C18.8723 4.01555 19.6206 5.1268 20.1736 6.405C20.7266 7.6832 21.0021 9.0482 21 10.5C20.9979 11.9518 20.7221 13.3168 20.1726 14.595C19.6231 15.8732 18.8751 16.9844 17.9287 17.9287C16.9823 18.873 15.8711 19.6213 14.595 20.1736C13.3189 20.7259 11.9539 21.0014 10.5 21ZM10.5 18.9C12.845 18.9 14.8312 18.0862 16.4587 16.4587C18.0862 14.8312 18.9 12.845 18.9 10.5C18.9 8.155 18.0862 6.16875 16.4587 4.54125C14.8312 2.91375 12.845 2.1 10.5 2.1C8.155 2.1 6.16875 2.91375 4.54125 4.54125C2.91375 6.16875 2.1 8.155 2.1 10.5C2.1 12.845 2.91375 14.8312 4.54125 16.4587C6.16875 18.0862 8.155 18.9 10.5 18.9Z" fill="#7D44CB"/>
+</g>
+<defs>
+<clipPath id="clip0_1_10839">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/svg/lock.svg

@@ -0,0 +1,9 @@
+<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33333 0C6.11683 0 3.5 2.61683 3.5 5.83333L3.5 9.33333H2.33333C1.71449 9.33333 1.121 9.57917 0.683417 10.0168C0.245833 10.4543 0 11.0478 0 11.6667L0 21C0 21.6188 0.245833 22.2123 0.683417 22.6499C1.121 23.0875 1.71449 23.3333 2.33333 23.3333H16.3333C16.9522 23.3333 17.5457 23.0875 17.9832 22.6499C18.4208 22.2123 18.6667 21.6188 18.6667 21V11.6667C18.6667 11.0478 18.4208 10.4543 17.9832 10.0168C17.5457 9.57917 16.9522 9.33333 16.3333 9.33333H15.1667V5.83333C15.1667 2.61683 12.5498 0 9.33333 0ZM5.83333 5.83333C5.83333 3.90367 7.40367 2.33333 9.33333 2.33333C11.263 2.33333 12.8333 3.90367 12.8333 5.83333V9.33333H5.83333V5.83333ZM10.5 18.3435V21H8.16667V18.3435C7.75878 18.1099 7.43127 17.7582 7.2273 17.3347C7.02333 16.9113 6.9525 16.4359 7.02413 15.9714C7.09576 15.5069 7.3065 15.0749 7.62856 14.7326C7.95062 14.3902 8.36887 14.1535 8.82817 14.0537C9.16934 13.978 9.52316 13.9799 9.86348 14.0594C10.2038 14.1388 10.5219 14.2936 10.7944 14.5124C11.0669 14.7312 11.2867 15.0085 11.4377 15.3236C11.5887 15.6388 11.6669 15.9839 11.6667 16.3333C11.666 16.7414 11.5578 17.142 11.353 17.4949C11.1482 17.8478 10.854 18.1405 10.5 18.3435Z" fill="url(#paint0_linear_1_11445)"/>
+<defs>
+<linearGradient id="paint0_linear_1_11445" x1="8.43011" y1="4.58333" x2="8.4301" y2="25.8333" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#B4BEB9"/>
+</linearGradient>
+</defs>
+</svg>

lib/common_ui/resources/my_assets.dart

@@ -16,6 +16,25 @@ class MyAssets {
   static const String mic = 'assets/images/mic.png';
   static const String micBLur = 'assets/images/mic_blur.png';
   static const String sampleAvatar = 'assets/images/sample_avatar.png';
+  static const String gem1 = 'assets/images/gem_1.png';
+  static const String gem2 = 'assets/images/gem_2.png';
+  static const String gem3 = 'assets/images/gem_3.png';
+  static const String gem4 = 'assets/images/gem_4.png';
+  static const String book1 = 'assets/images/book_1.jpg';
+  static const String book2 = 'assets/images/book_2.jpg';
+  static const String book3 = 'assets/images/book_3.png';
+  static const String boost1 = 'assets/images/boost_1.png';
+  static const String boost2 = 'assets/images/boost_2.png';
+  static const String boost3 = 'assets/images/boost_3.png';
+  static const String boost4 = 'assets/images/boost_4.png';
+  static const String character1 = 'assets/images/character_1.png';
+  static const String character2 = 'assets/images/character_2.png';
+  static const String character3 = 'assets/images/character_3.png';
+  static const String member1 = 'assets/images/member_1.png';
+  static const String member2 = 'assets/images/member_2.png';
+  static const String member3 = 'assets/images/member_3.png';
+  static const String member4 = 'assets/images/member_4.png';
+  static const String done = 'assets/images/done.png';
 
   /// ----- Svg -----
   static const String sampleSvg = 'assets/svg/sample.svg';
@@ -32,6 +51,10 @@ class MyAssets {
   static const String introStar = 'assets/svg/intro_star.svg';
   static const String iconLocation = 'assets/svg/icon_location.svg';
   static const String iconLogout = 'assets/svg/icon_logout.svg';
+  static const String iconInfo = 'assets/svg/icon_info.svg';
+  static const String gem = 'assets/svg/gem.svg';
+  static const String lock = 'assets/svg/lock.svg';
+
 
   /// ----- Audios -----
   static const String sampleAudio = 'assets/audios/sample.mp3';

lib/core/utils/number_format.dart

@@ -0,0 +1,11 @@
+extension NumberFormat on double? {
+  num get priceFormat {
+    if (this == null) {
+      return 0;
+    }
+    if (this! % 1 == 0) {
+      return this!.toInt();
+    }
+    return this!;
+  }
+}

lib/core/widgets/app_bar/styles/app_bar_action.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
 class AppBarAction extends StatelessWidget {
@@ -10,28 +11,19 @@ class AppBarAction extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
+    return MyContainer(
       onTap: onTap,
-      borderRadius: BorderRadius.all(Radius.circular(100)),
-      child: Ink(
       width: MySpaces.s32,
       height: MySpaces.s32,
       padding: EdgeInsets.all(MySpaces.s6),
-        decoration: BoxDecoration(
-          shape: BoxShape.circle,
-          border: Border.all(
-            width: 1,
-            color: Color(0XFF6D2ADA),
-            strokeAlign: BorderSide.strokeAlignInside,
-          ),
+      boxShape: BoxShape.circle,
+      borderColor: Color(0XFF6D2ADA),
       gradient: LinearGradient(
         begin: AlignmentDirectional.topStart,
         end: AlignmentDirectional.bottomEnd,
         colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
       ),
-        ),
       child: MyImage(asset: icon ?? ''),
-      ),
     );
   }
 }

lib/core/widgets/app_bar/styles/app_bar_add_widget.dart

@@ -4,6 +4,7 @@ import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
 class AppBarAddWidget extends StatelessWidget {
@@ -22,30 +23,21 @@ class AppBarAddWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
+    return MyContainer(
       onTap: onTap,
-      borderRadius: BorderRadius.all(Radius.circular(100)),
-      child: Ink(
       width: 96,
       height: 32,
-        padding: EdgeInsets.all(1),
-        decoration: ShapeDecoration(
-          shape: StadiumBorder(),
-          gradient: LinearGradient(
+      borderRadius: BorderRadius.all(Radius.circular(50)),
+      borderGradient: LinearGradient(
         begin: AlignmentDirectional.topStart,
         end: AlignmentDirectional.bottomEnd,
         colors: gradientColors ?? [],
       ),
-        ),
-        child: Ink(
       padding: EdgeInsetsDirectional.only(
         start: MySpaces.s8,
         end: MySpaces.s4,
       ),
-          decoration: ShapeDecoration(
-            shape: StadiumBorder(),
       color: context.backgroundColor,
-          ),
       child: Row(
         children: [
           MyImage(asset: icon ?? ''),
@@ -58,20 +50,17 @@ class AppBarAddWidget extends StatelessWidget {
               style: Lexend.bold.copyWith(fontSize: 12),
             ),
           ),
-              Container(
+          MyContainer(
+            onTap: onTap,
             width: 23,
             height: 23,
-                padding: EdgeInsets.all(MySpaces.s6),
-                decoration: BoxDecoration(
-                  shape: BoxShape.circle,
+            padding: EdgeInsets.all(5),
             color: Color(0XFF4F09BF),
-                ),
+            boxShape: BoxShape.circle,
             child: MyImage(asset: MyAssets.iconPlus),
           ),
         ],
       ),
-        ),
-      ),
     );
   }
 }

lib/core/widgets/background/my_background.dart

@@ -3,9 +3,10 @@ import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 
 class MyBackground extends StatelessWidget {
-  const MyBackground({super.key, required this.child});
+  const MyBackground({super.key, this.child, this.listChild});
 
-  final Widget child;
+  final Widget? child;
+  final Widget? listChild;
 
   @override
   Widget build(BuildContext context) {
@@ -16,7 +17,7 @@ class MyBackground extends StatelessWidget {
           colors: [const Color(0xFF321A6D), context.backgroundColor],
         ),
       ),
-      child: SingleChildScrollView(
+      child: listChild ?? SingleChildScrollView(
         padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
         child: child,
       ),

lib/core/widgets/button/enum/my_button_type.dart

@@ -0,0 +1,4 @@
+enum MyButtonType {
+  defaultType,
+  activeType,
+}

lib/core/widgets/button/my_gradient_button.dart

@@ -1,45 +1,39 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/button/enum/my_button_type.dart';
+import 'package:shia_game_flutter/core/widgets/button/styles/active_style.dart';
+import 'package:shia_game_flutter/core/widgets/button/styles/default_style.dart';
 
 class MyGradientButton extends StatelessWidget {
-  const MyGradientButton({super.key});
+  const MyGradientButton({
+    super.key,
+    this.onTap,
+    this.title,
+    this.fontSize,
+    this.icon,
+    this.type = MyButtonType.defaultType,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+  final double? fontSize;
+  final Widget? icon;
+  final MyButtonType type;
 
   @override
   Widget build(BuildContext context) {
-    return GradientContainer(
-      height: 32,
-      width: 116,
-      onTap: () {},
-      borderColor: Color(0XFF6D2ADA),
-      borderRadius: BorderRadius.all(Radius.circular(5)),
-      gradient: LinearGradient(
-        begin: AlignmentDirectional.topStart,
-        end: AlignmentDirectional.bottomEnd,
-        colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
-      ),
-      child: ShaderMask(
-        blendMode: BlendMode.modulate,
-        shaderCallback: (bounds) => LinearGradient(
-          begin: Alignment.topCenter,
-          end: Alignment.bottomCenter,
-          colors: [Color(0XFFFFFFFF), Color(0XFFFFFFFF), Color(0XFF9C8CC2)],
-        ).createShader(bounds),
-        child: Text(
-          'Change Profile',
-          style: Lexend.extraBold.copyWith(
-            fontSize: 12,
-            shadows: [
-              BoxShadow(
-                color: Color(0xFF1B0D31),
-                blurRadius: 0,
-                offset: Offset(0, 1.69),
-                spreadRadius: 0,
-              ),
-            ],
-          ),
+    return switch (type) {
+      MyButtonType.defaultType => DefaultStyle(
+        onTap: onTap,
+        title: title,
+        fontSize: fontSize,
+        icon: icon,
       ),
+      MyButtonType.activeType => ActiveStyle(
+        onTap: onTap,
+        title: title,
+        fontSize: fontSize,
+        icon: icon,
       ),
-    );
+    };
   }
 }

lib/core/widgets/button/styles/active_style.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+
+class ActiveStyle extends StatelessWidget {
+  const ActiveStyle({
+    super.key,
+    this.onTap,
+    this.title,
+    this.fontSize,
+    this.icon,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+  final double? fontSize;
+  final Widget? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      height: 32,
+      width: 116,
+      onTap: onTap,
+      borderRadius: BorderRadius.all(Radius.circular(5)),
+      borderGradient: LinearGradient(
+        begin: AlignmentDirectional.centerStart,
+        end: AlignmentDirectional.centerEnd,
+        colors: [
+          Color(0xFF2E7630),
+          Color(0xFF2E7630).withValues(alpha: 0),
+        ]
+      ),
+      color: Color(0XFF172A19),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          GradientText(
+            text: title,
+            gradientColor: [
+              Color(0XFF54C221),
+              Color(0XFF358111),
+            ],
+            shadowColor: Color(0xFF0A1F0F),
+            offset: Offset(0, 1.69),
+            fontSize: fontSize ?? 12,
+          ),
+          if (icon != null) ...{
+            MySpaces.s6.gapWidth,
+            icon ?? SizedBox.shrink(),
+          },
+        ],
+      ),
+    );
+  }
+}

lib/core/widgets/button/styles/default_style.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+
+class DefaultStyle extends StatelessWidget {
+  const DefaultStyle({
+    super.key,
+    this.onTap,
+    this.title,
+    this.fontSize,
+    this.icon,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+  final double? fontSize;
+  final Widget? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      height: 32,
+      width: 116,
+      onTap: onTap,
+      borderColor: Color(0XFF6D2ADA),
+      borderRadius: BorderRadius.all(Radius.circular(5)),
+      gradient: LinearGradient(
+        begin: AlignmentDirectional.topStart,
+        end: AlignmentDirectional.bottomEnd,
+        colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          GradientText(
+            text: title,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0xFF1B0D31),
+            offset: Offset(0, 1.69),
+            fontSize: fontSize ?? 12,
+          ),
+          if (icon != null) ...{
+            MySpaces.s6.gapWidth,
+            icon ?? SizedBox.shrink(),
+          },
+        ],
+      ),
+    );
+  }
+}

lib/core/widgets/container/gradient_container.dart → lib/core/widgets/container/my_container.dart

@@ -1,13 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 
-class GradientContainer extends StatelessWidget {
-  const GradientContainer({
+class MyContainer extends StatelessWidget {
+  const MyContainer({
     super.key,
     this.width,
     this.height,
     this.padding,
-    this.shapeBorder,
     this.boxShape,
     this.borderGradient,
     this.borderRadius,
@@ -18,12 +17,12 @@ class GradientContainer extends StatelessWidget {
     this.gradient,
     this.borderColor,
     this.onTap,
+    this.inset,
   });
 
   final double? width;
   final double? height;
   final EdgeInsetsGeometry? padding;
-  final ShapeBorder? shapeBorder;
   final BoxShape? boxShape;
   final Gradient? borderGradient;
   final Gradient? gradient;
@@ -34,51 +33,42 @@ class GradientContainer extends StatelessWidget {
   final Widget? child;
   final DecorationImage? image;
   final VoidCallback? onTap;
+  final bool? inset;
 
   @override
   Widget build(BuildContext context) {
     return Material(
       color: context.noColor,
-      borderRadius: borderRadius,
+      borderRadius: boxShape == BoxShape.circle
+          ? BorderRadius.all(Radius.circular(100))
+          : borderRadius,
       shadowColor: boxShadow?.first.color,
       elevation: boxShadow?.first.blurRadius ?? 0,
-      shape: shapeBorder,
       child: InkWell(
         onTap: onTap,
         customBorder: RoundedRectangleBorder(
-          borderRadius: borderRadius ?? BorderRadius.zero,
+          borderRadius: boxShape == BoxShape.circle
+              ? BorderRadius.all(Radius.circular(100))
+              : borderRadius ?? BorderRadius.zero,
         ),
         child: Ink(
           padding: EdgeInsets.all(1),
           width: width,
           height: height,
-          decoration: shapeBorder == null
-              ? BoxDecoration(
+          decoration: BoxDecoration(
             shape: boxShape ?? BoxShape.rectangle,
             gradient: borderGradient,
             borderRadius: borderRadius,
             color: borderColor,
-                )
-              : ShapeDecoration(
-                  shape: shapeBorder!,
-                  gradient: borderGradient,
-                  color: borderColor,
           ),
           child: Ink(
             padding: padding,
-            decoration: shapeBorder == null
-                ? BoxDecoration(
+            decoration: BoxDecoration(
               shape: boxShape ?? BoxShape.rectangle,
               gradient: gradient,
               borderRadius: borderRadius,
               color: color,
               image: image,
-                  )
-                : ShapeDecoration(
-                    shape: shapeBorder!,
-                    gradient: gradient,
-                    color: color,
-                    image: image,
             ),
             child: Center(child: child),
           ),

lib/core/widgets/text/gradient_text.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+
+class GradientText extends StatelessWidget {
+  const GradientText({
+    super.key,
+    this.text,
+    this.color = const Color(0xFFFFFFFF),
+    this.gradientColor,
+    this.fontSize = 14,
+    this.shadowColor = const Color(0xFF000000),
+    this.blurRadius = 0,
+    this.spreadRadius = 0,
+    this.offset = Offset.zero,
+    this.textAlign,
+  });
+
+  final String? text;
+  final Color color;
+  final List<Color>? gradientColor;
+  final double? fontSize;
+  final Color shadowColor;
+  final double blurRadius;
+  final double spreadRadius;
+  final Offset offset;
+  final TextAlign? textAlign;
+
+  @override
+  Widget build(BuildContext context) {
+    return ShaderMask(
+      blendMode: BlendMode.modulate,
+      shaderCallback: (bounds) => LinearGradient(
+        begin: Alignment.topCenter,
+        end: Alignment.bottomCenter,
+        colors: gradientColor ?? [
+          context.primaryColor,
+          context.primaryColor,
+          color,
+        ],
+      ).createShader(bounds),
+      child: Text(
+        text ?? '',
+        textAlign: textAlign,
+        maxLines: 1,
+        style: Lexend.extraBold.copyWith(
+          fontSize: fontSize,
+          shadows: [
+            BoxShadow(
+              color: shadowColor,
+              blurRadius: blurRadius,
+              offset: offset,
+              spreadRadius: spreadRadius,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/home/presentation/pages/home_page.dart

@@ -3,9 +3,11 @@ import 'package:get/get.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
 import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart';
+import 'package:shia_game_flutter/features/home/presentation/pages/widgets/enums/custom_widget_type.dart';
 import 'package:shia_game_flutter/features/home/presentation/pages/widgets/home_battle_cast.dart';
 import 'package:shia_game_flutter/features/home/presentation/pages/widgets/home_battle_league.dart';
 import 'package:shia_game_flutter/features/home/presentation/pages/widgets/home_custom_widget.dart';
@@ -25,7 +27,7 @@ class HomePage extends GetView<HomeController> {
           HomeMembership(),
           HomeBattleLeague(),
           MySpaces.s20.gapHeight,
-          _customWidgets(),
+          _customWidgets(context),
           MySpaces.s20.gapHeight,
           HomeBattleCast(),
         ],
@@ -33,14 +35,14 @@ class HomePage extends GetView<HomeController> {
     );
   }
 
-  Widget _customWidgets() {
+  Widget _customWidgets(BuildContext context) {
     return Row(
       spacing: MySpaces.s22,
       children: [
         Expanded(
           child: HomeCustomWidget(
             type: CustomWidgetType.customLeague,
-            firstText: 'ongoing:',
+            firstText: '${context.translate.ongoing}:',
             secondText:
                 'Saba Center League - Imam Hassan ministry London school',
           ),
@@ -48,8 +50,8 @@ class HomePage extends GetView<HomeController> {
         Expanded(
           child: HomeCustomWidget(
             type: CustomWidgetType.friendBattle,
-            firstText: 'online:',
-            secondText: 'No one\'s online',
+            firstText: '${context.translate.online}:',
+            secondText: context.translate.no_one_online,
           ),
         ),
       ],

lib/features/home/presentation/pages/widgets/enums/custom_widget_type.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+
+enum CustomWidgetType {
+  customLeague,
+  friendBattle;
+
+  static Map<CustomWidgetType, Gradient> get borderGradient => {
+    CustomWidgetType.customLeague: LinearGradient(
+      begin: AlignmentDirectional.topCenter,
+      end: AlignmentDirectional.bottomCenter,
+      colors: [Color(0XFF4BAD42), Color(0XFF147743)],
+    ),
+    CustomWidgetType.friendBattle: LinearGradient(
+      begin: AlignmentDirectional.topCenter,
+      end: AlignmentDirectional.bottomCenter,
+      colors: [Color(0XFFED9851), Color(0XFFC77041)],
+    ),
+  };
+
+  static Map<CustomWidgetType, Gradient> get gradient => {
+    CustomWidgetType.customLeague: RadialGradient(
+      radius: 0.7,
+      center: Alignment(-0.6, -0.8),
+      colors: [Color(0XFF58AE23), Color(0XFF066A36)],
+    ),
+    CustomWidgetType.friendBattle: RadialGradient(
+      radius: 0.7,
+      center: Alignment(-0.6, -0.8),
+      colors: [Color(0XFFE99E53), Color(0XFFBC673A)],
+    ),
+  };
+
+  static Map<CustomWidgetType, String> get image => {
+    CustomWidgetType.customLeague: MyAssets.medal,
+    CustomWidgetType.friendBattle: MyAssets.friendBattle,
+  };
+
+  static Map<CustomWidgetType, Color> get containerColor => {
+    CustomWidgetType.customLeague: Color(0XFF05542B),
+    CustomWidgetType.friendBattle: Color(0XFFA45A31),
+  };
+
+  static Map<CustomWidgetType, Color> get firstTextColor => {
+    CustomWidgetType.customLeague: Color(0XFF4FDF94),
+    CustomWidgetType.friendBattle: Color(0XFFE3DFD5),
+  };
+
+  static Map<CustomWidgetType, Color> get secondTextColor => {
+    CustomWidgetType.customLeague: Color(0XFF85C9A6),
+    CustomWidgetType.friendBattle: Color(0XFFDFBC9D),
+  };
+
+  static Map<CustomWidgetType, Widget> get title => {
+    CustomWidgetType.customLeague: GradientText(
+      text: Get.context?.translate.custom_league,
+      color: Color(0XFFBEF8DA),
+      shadowColor: Color(0xFF07592F),
+      blurRadius: 0.52,
+      offset: Offset(0, 1.04),
+    ),
+    CustomWidgetType.friendBattle: GradientText(
+      text: Get.context?.translate.friends_battle,
+      color: Color(0XFFFFB994),
+      shadowColor: Color(0xFFAA5B31),
+      blurRadius: 0.52,
+      offset: Offset(0, 1.04),
+    ),
+  };
+}

lib/features/home/presentation/pages/widgets/home_battle_cast.dart

@@ -4,8 +4,10 @@ import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
 
 class HomeBattleCast extends StatelessWidget {
   const HomeBattleCast({
@@ -18,7 +20,7 @@ class HomeBattleCast extends StatelessWidget {
       alignment: Alignment.center,
       clipBehavior: Clip.none,
       children: [
-        GradientContainer(
+        MyContainer(
           height: 120,
           borderRadius: BorderRadius.all(Radius.circular(MySpaces.s20)),
           borderGradient: LinearGradient(
@@ -44,27 +46,13 @@ class HomeBattleCast extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.end,
             children: [
-              ShaderMask(
-                blendMode: BlendMode.modulate,
-                shaderCallback: (bounds) => LinearGradient(
-                  begin: Alignment.topCenter,
-                  end: Alignment.bottomCenter,
-                  colors: [Color(0XFFFFFFFF), Color(0XFFE4E3FF)],
-                ).createShader(bounds),
-                child: Text(
-                  'Battle Cast',
-                  style: Lexend.extraBold.copyWith(
-                    fontSize: 22,
-                    shadows: [
-                      BoxShadow(
-                        color: Color(0xFF3C38C4),
-                        blurRadius: 0.52,
+              GradientText(
+                text: context.translate.battle_cast,
+                color: Color(0XFFE4E3FF),
                 offset: Offset(0, 1.04),
-                        spreadRadius: 0,
-                      ),
-                    ],
-                  ),
-                ),
+                blurRadius: 0.52,
+                shadowColor: Color(0xFF3C38C4),
+                fontSize: 22,
               ),
               MySpaces.s10.gapHeight,
               Container(
@@ -96,7 +84,7 @@ class HomeBattleCast extends StatelessWidget {
         PositionedDirectional(
           start: -1,
           top: -MySpaces.s4,
-          child: GradientContainer(
+          child: MyContainer(
             color: Color(0XFFCC9B22),
             padding: EdgeInsets.symmetric(
               vertical: MySpaces.s2,

lib/features/home/presentation/pages/widgets/home_battle_league.dart

@@ -3,9 +3,11 @@ import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
 import 'package:shia_game_flutter/core/utils/screen_size.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
 
 class HomeBattleLeague extends StatelessWidget {
   const HomeBattleLeague({super.key});
@@ -15,7 +17,7 @@ class HomeBattleLeague extends StatelessWidget {
     return Stack(
       alignment: AlignmentDirectional.bottomEnd,
       children: [
-        GradientContainer(
+        MyContainer(
           width: context.widthScreen,
           height: 120,
           padding: EdgeInsets.symmetric(
@@ -38,30 +40,16 @@ class HomeBattleLeague extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               context.widthScreen.gapWidth,
-              ShaderMask(
-                blendMode: BlendMode.modulate,
-                shaderCallback: (bounds) => LinearGradient(
-                  begin: Alignment.topCenter,
-                  end: Alignment.bottomCenter,
-                  colors: [Color(0XFFFFFFFF), Color(0XFFCAA8FF)],
-                ).createShader(bounds),
-                child: Text(
-                  'Battle League',
-                  style: Lexend.extraBold.copyWith(
-                    fontSize: 22,
-                    shadows: [
-                      BoxShadow(
-                        color: Color(0xFF3E1381),
+              GradientText(
+                text: context.translate.battle_league,
+                color: Color(0XFFCAA8FF),
+                shadowColor: Color(0xFF3E1381),
                 blurRadius: 0.84,
                 offset: Offset(0, 1.69),
-                        spreadRadius: 0,
-                      ),
-                    ],
-                  ),
-                ),
+                fontSize: 22,
               ),
               Text(
-                'The faster you answer, the winner',
+                context.translate.answer_win,
                 style: Lexend.medium.copyWith(
                   fontSize: 10,
                   color: Color(0XFFA183D2),

lib/features/home/presentation/pages/widgets/home_custom_widget.dart

@@ -1,112 +1,13 @@
 import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
 import 'package:flutter_inset_box_shadow_update/flutter_inset_box_shadow_update.dart';
-import 'package:get/get.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
-import 'package:shia_game_flutter/core/utils/my_localization.dart';
 import 'package:shia_game_flutter/core/utils/screen_size.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
-
-enum CustomWidgetType {
-  customLeague,
-  friendBattle;
-
-  static Map<CustomWidgetType, Gradient> get borderGradient => {
-    CustomWidgetType.customLeague: LinearGradient(
-      begin: AlignmentDirectional.topCenter,
-      end: AlignmentDirectional.bottomCenter,
-      colors: [Color(0XFF4BAD42), Color(0XFF147743)],
-    ),
-    CustomWidgetType.friendBattle: LinearGradient(
-      begin: AlignmentDirectional.topCenter,
-      end: AlignmentDirectional.bottomCenter,
-      colors: [Color(0XFFED9851), Color(0XFFC77041)],
-    ),
-  };
-
-  static Map<CustomWidgetType, Gradient> get gradient => {
-    CustomWidgetType.customLeague: RadialGradient(
-      radius: 0.7,
-      center: Alignment(-0.6, -0.8),
-      colors: [Color(0XFF58AE23), Color(0XFF066A36)],
-    ),
-    CustomWidgetType.friendBattle: RadialGradient(
-      radius: 0.7,
-      center: Alignment(-0.6, -0.8),
-      colors: [Color(0XFFE99E53), Color(0XFFBC673A)],
-    ),
-  };
-
-  static Map<CustomWidgetType, String> get image => {
-    CustomWidgetType.customLeague: MyAssets.medal,
-    CustomWidgetType.friendBattle: MyAssets.friendBattle,
-  };
-
-  static Map<CustomWidgetType, Color> get containerColor => {
-    CustomWidgetType.customLeague: Color(0XFF05542B),
-    CustomWidgetType.friendBattle: Color(0XFFA45A31),
-  };
-
-  static Map<CustomWidgetType, Color> get firstTextColor => {
-    CustomWidgetType.customLeague: Color(0XFF4FDF94),
-    CustomWidgetType.friendBattle: Color(0XFFE3DFD5),
-  };
-
-  static Map<CustomWidgetType, Color> get secondTextColor => {
-    CustomWidgetType.customLeague: Color(0XFF85C9A6),
-    CustomWidgetType.friendBattle: Color(0XFFDFBC9D),
-  };
-
-  static Map<CustomWidgetType, Widget> get title => {
-    CustomWidgetType.customLeague: ShaderMask(
-      blendMode: BlendMode.modulate,
-      shaderCallback: (bounds) => LinearGradient(
-        begin: Alignment.topCenter,
-        end: Alignment.bottomCenter,
-        colors: [Color(0XFFFFFFFF), Color(0XFFFFFFFF), Color(0XFFBEF8DA)],
-      ).createShader(bounds),
-      child: Text(
-        Get.context?.translate.custom_league ?? '',
-        style: Lexend.extraBold.copyWith(
-          fontSize: 14,
-          shadows: [
-            BoxShadow(
-              color: Color(0xFF07592F),
-              blurRadius: 0.52,
-              offset: Offset(0, 1.04),
-              spreadRadius: 0,
-            ),
-          ],
-        ),
-      ),
-    ),
-    CustomWidgetType.friendBattle: ShaderMask(
-      blendMode: BlendMode.modulate,
-      shaderCallback: (bounds) => LinearGradient(
-        begin: Alignment.topCenter,
-        end: Alignment.bottomCenter,
-        colors: [Color(0XFFFFFFFF), Color(0XFFFFFFFF), Color(0XFFFFB994)],
-      ).createShader(bounds),
-      child: Text(
-        Get.context?.translate.friends_battle ?? '',
-        style: Lexend.extraBold.copyWith(
-          fontSize: 14,
-          shadows: [
-            BoxShadow(
-              color: Color(0xFFAA5B31),
-              blurRadius: 0.52,
-              offset: Offset(0, 1.04),
-              spreadRadius: 0,
-            ),
-          ],
-        ),
-      ),
-    ),
-  };
-}
+import 'package:shia_game_flutter/features/home/presentation/pages/widgets/enums/custom_widget_type.dart';
 
 class HomeCustomWidget extends StatelessWidget {
   const HomeCustomWidget({
@@ -122,7 +23,7 @@ class HomeCustomWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GradientContainer(
+    return MyContainer(
       height: 130,
       borderRadius: BorderRadius.all(Radius.circular(20)),
       borderGradient: CustomWidgetType.borderGradient[type],

lib/features/home/presentation/pages/widgets/home_membership.dart

@@ -7,7 +7,7 @@ import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
 import 'package:shia_game_flutter/core/utils/my_localization.dart';
 import 'package:shia_game_flutter/core/utils/screen_size.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
 class HomeMembership extends StatelessWidget {
@@ -15,7 +15,7 @@ class HomeMembership extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GradientContainer(
+    return MyContainer(
       width: context.widthScreen,
       color: context.backgroundColor,
       borderGradient: LinearGradient(

lib/features/profile/presentation/ui/profile_page.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
 import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
 import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
 import 'package:shia_game_flutter/core/widgets/input/my_input.dart';
@@ -21,14 +22,11 @@ class ProfilePage extends GetView<ProfileController> {
         children: [
           60.0.gapHeight,
           ProfileAvatar(),
-          MyGradientButton(),
+          _changeProfileBtn(context),
           MySpaces.s40.gapHeight,
-          MyInput(
-            labelText: 'User Name',
-            hintText: 'Unknown123456',
-          ),
+          _userNameInput(context),
           MySpaces.s28.gapHeight,
-          _locationInput(),
+          _locationInput(context),
           200.0.gapHeight,
           _bottomButtons(),
         ],
@@ -36,14 +34,28 @@ class ProfilePage extends GetView<ProfileController> {
     );
   }
 
-  Row _locationInput() {
+  MyGradientButton _changeProfileBtn(BuildContext context) {
+    return MyGradientButton(
+      onTap: () {},
+      title: context.translate.change_profile,
+    );
+  }
+
+  MyInput _userNameInput(BuildContext context) {
+    return MyInput(
+      labelText: context.translate.username,
+      hintText: 'Unknown123456',
+    );
+  }
+
+  Row _locationInput(BuildContext context) {
     return Row(
       crossAxisAlignment: CrossAxisAlignment.end,
       spacing: MySpaces.s10,
       children: [
         Expanded(
           child: MyInput(
-            labelText: 'Your Region',
+            labelText: context.translate.your_region,
             hintText: 'Iran - Tehran',
           ),
         ),

lib/features/profile/presentation/ui/widgets/profile_delete_account.dart

@@ -3,14 +3,14 @@ import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 import 'package:shia_game_flutter/core/utils/my_localization.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 
 class ProfileDeleteAccount extends StatelessWidget {
   const ProfileDeleteAccount({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return GradientContainer(
+    return MyContainer(
       height: 58,
       onTap: () {},
       borderRadius: BorderRadius.all(Radius.circular(MySpaces.s12)),

lib/features/profile/presentation/ui/widgets/profile_location.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
 class ProfileLocation extends StatelessWidget {
@@ -8,7 +8,7 @@ class ProfileLocation extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GradientContainer(
+    return MyContainer(
       onTap: () {},
       width: 48,
       height: 48,

lib/features/profile/presentation/ui/widgets/profile_logout.dart

@@ -3,7 +3,7 @@ import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/core/utils/my_localization.dart';
-import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
 class ProfileLogout extends StatelessWidget {
@@ -11,7 +11,7 @@ class ProfileLogout extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GradientContainer(
+    return MyContainer(
       height: 58,
       onTap: () {},
       borderRadius: BorderRadius.all(Radius.circular(MySpaces.s12)),

lib/features/shop/data/model/shop_model.dart

@@ -1,13 +1,9 @@
 import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
 
 class ShopModel extends ShopEntity {
-  const ShopModel({
-    super.id,
-  });
+  const ShopModel();
 
   factory ShopModel.fromJson(Map<String, dynamic> json) {
-    return ShopModel(
-      id: json['id'],
-    );
+    return ShopModel();
   }
 }

lib/features/shop/domain/entity/book_entity.dart

@@ -0,0 +1,9 @@
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class BookEntity extends ShopEntity {
+  const BookEntity({
+    super.type = ShopType.book,
+    super.image,
+    super.title,
+  });
+}

lib/features/shop/domain/entity/boost_entity.dart

@@ -0,0 +1,11 @@
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class BoostEntity extends ShopEntity {
+  const BoostEntity({
+    super.type = ShopType.boost,
+    super.number,
+    super.price,
+    super.image,
+    super.title = 'Boost',
+  });
+}

lib/features/shop/domain/entity/character_entity.dart

@@ -0,0 +1,11 @@
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class CharacterEntity extends ShopEntity {
+  const CharacterEntity({
+    super.type = ShopType.character,
+    super.image,
+    super.isActive,
+    super.isBuy,
+    super.price,
+  });
+}

lib/features/shop/domain/entity/gem_entity.dart

@@ -0,0 +1,11 @@
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class GemEntity extends ShopEntity {
+  const GemEntity({
+    super.type = ShopType.gem,
+    super.image,
+    super.price,
+    super.title = 'Gems',
+    super.number,
+  });
+}

lib/features/shop/domain/entity/pro_membership_entity.dart

@@ -0,0 +1,11 @@
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class ProMembershipEntity extends ShopEntity {
+  const ProMembershipEntity({
+    super.type = ShopType.proMembership,
+    super.image,
+    super.price,
+    super.title = 'Month',
+    super.number,
+  });
+}

lib/features/shop/domain/entity/shop_entity.dart

@@ -1,14 +1,42 @@
 import 'package:equatable/equatable.dart';
 
+enum ShopType {
+  gem,
+  boost,
+  character,
+  book,
+  proMembership,
+}
+
 class ShopEntity extends Equatable {
-  final int? id;
+  final ShopType? type;
+  final String? image;
+  final int? number;
+  final String? title;
+  final double? price;
+  final bool? isActive;
+  final bool? isBuy;
+
+
 
   const ShopEntity({
-    this.id,
+    this.type,
+    this.image,
+    this.number,
+    this.title,
+    this.price,
+    this.isActive,
+    this.isBuy,
   });
 
   @override
   List<Object?> get props => [
-        id,
+    type,
+    image,
+    number,
+    title,
+    price,
+    isActive,
+    isBuy,
   ];
 }

lib/features/shop/domain/entity/shop_package_entity.dart

@@ -0,0 +1,21 @@
+import 'package:equatable/equatable.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class ShopPackageEntity extends Equatable {
+  final String? title;
+  final String? info;
+  final List<ShopEntity>? shopList;
+
+  const ShopPackageEntity({
+    this.title,
+    this.info,
+    this.shopList,
+  });
+
+  @override
+  List<Object?> get props => [
+    title,
+    info,
+    shopList,
+  ];
+}

lib/features/shop/presentation/controller/shop_controller.dart

@@ -1,7 +1,13 @@
 import 'package:flutter/cupertino.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/core/params/shop_params.dart';
 import 'package:shia_game_flutter/core/status/base_status.dart';
-import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/book_entity.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/boost_entity.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/character_entity.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/gem_entity.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/pro_membership_entity.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_package_entity.dart';
 import 'package:shia_game_flutter/features/shop/domain/usecases/get_shop_usecase.dart';
 import 'package:get/get.dart';
 
@@ -26,7 +32,52 @@ class ShopController extends GetxController with StateMixin {
 
   /// ----- Variables -----
   final Rx<ShopParams> shopParams = Rx(ShopParams());
-  final Rx<ShopEntity> shopEntity = Rx(const ShopEntity());
+  final RxList<ShopPackageEntity> shopList = RxList([
+    ShopPackageEntity(
+      title: 'Gem Package',
+      shopList: [
+        GemEntity(number: 30, image: MyAssets.gem1, price: 12),
+        GemEntity(number: 60, image: MyAssets.gem2, price: 24),
+        GemEntity(number: 120, image: MyAssets.gem3, price: 48),
+        GemEntity(number: 270, image: MyAssets.gem4, price: 96),
+      ],
+    ),
+    ShopPackageEntity(
+      title: 'Boost Package',
+      shopList:  [
+        BoostEntity(number: 10, image: MyAssets.boost1, price: 10),
+        BoostEntity(number: 20, image: MyAssets.boost2, price: 20),
+        BoostEntity(number: 30, image: MyAssets.boost3, price: 30),
+        BoostEntity(number: 40, image: MyAssets.boost4, price: 40),
+      ],
+    ),
+    ShopPackageEntity(
+      title: 'Character Package',
+      shopList:  [
+        CharacterEntity(image: MyAssets.character1, price: 12, isActive: true, isBuy: true),
+        CharacterEntity(image: MyAssets.character2, price: 12, isActive: false, isBuy: true),
+        CharacterEntity(image: MyAssets.character3, price: 12, isActive: false, isBuy: false),
+        CharacterEntity(image: MyAssets.character1, price: 12, isActive: false, isBuy: false),
+      ],
+    ),
+    ShopPackageEntity(
+      title: 'Books',
+      shopList: [
+        BookEntity(image: MyAssets.book1, title: 'Super Stories of the Prophets'),
+        BookEntity(image: MyAssets.book2, title: 'Super Stories of the Prophets'),
+        BookEntity(image: MyAssets.book3, title: 'Super Stories of the Prophets'),
+      ],
+    ),
+    ShopPackageEntity(
+      title: 'Pro Membership',
+      shopList: [
+        ProMembershipEntity(image: MyAssets.member1, price: 2.5, number: 1),
+        ProMembershipEntity(image: MyAssets.member2, price: 7, number: 3),
+        ProMembershipEntity(image: MyAssets.member3, price: 10, number: 5),
+        ProMembershipEntity(image: MyAssets.member4, price: 12, number: 6),
+      ],
+    ),
+  ]);
 
   /// ------ Controllers ------
   final TextEditingController textEditingController = TextEditingController();
@@ -42,7 +93,6 @@ class ShopController extends GetxController with StateMixin {
     await getShopUseCase(shopParams.value).then(
       (value) => value.fold(
         (data) {
-          shopEntity.value = data;
           change('', status: RxStatus.success());
         },
         (error) {

lib/features/shop/presentation/ui/shop_page.dart

@@ -1,14 +1,32 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/features/shop/presentation/controller/shop_controller.dart';
 import 'package:get/get.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
+import 'package:shia_game_flutter/features/shop/presentation/controller/shop_controller.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_package_entity.dart';
 
 class ShopPage extends GetView<ShopController> {
   const ShopPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const Center(
-      child: Text('Shop Page'),
+    return MyBackground(
+      listChild: Obx(
+        () => ListView.separated(
+          itemCount: controller.shopList.length,
+          padding: EdgeInsets.only(
+            left: MySpaces.s30,
+            right: MySpaces.s30,
+            bottom: MySpaces.s30,
+            top: 60,
+          ),
+          itemBuilder: (context, index) => ShopPackageWidget(
+            shopPackage: controller.shopList[index],
+          ),
+          separatorBuilder: (context, index) => MySpaces.s20.gapHeight,
+        ),
+      ),
     );
   }
 }

lib/features/shop/presentation/ui/widgets/shop_item/shop_item_widget.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/book_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/boost_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/character_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/gem_style.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/pro_membership_style.dart';
+
+class ShopItemWidget extends StatelessWidget {
+  const ShopItemWidget({
+    super.key,
+    required this.shop,
+  });
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      color: Color(0XFF1B0B38),
+      borderColor: Color(0XFF462A79),
+      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s14)),
+      padding: EdgeInsets.all(MySpaces.s12),
+      child: MyContainer(
+        color: Color(0XFF070D1C),
+        borderRadius: BorderRadius.all(Radius.circular(7)),
+        padding: EdgeInsets.all(7),
+        child: switch(shop.type) {
+          ShopType.gem => GemStyle(shop: shop),
+          ShopType.boost => BoostStyle(shop: shop),
+          ShopType.character => CharacterStyle(shop: shop),
+          ShopType.book => BookStyle(shop: shop),
+          ShopType.proMembership => ProMembershipStyle(shop: shop),
+          _ => GemStyle(shop: shop),
+        },
+      ),
+    );
+  }
+}

lib/features/shop/presentation/ui/widgets/shop_item/styles/book_style.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class BookStyle extends StatelessWidget {
+  const BookStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 230,
+      child: Column(
+        children: [
+          Expanded(
+            child: Container(
+              decoration: BoxDecoration(
+                border: Border.all(width: 2, color: context.primaryColor),
+                borderRadius: BorderRadius.all(Radius.circular(8)),
+              ),
+              child: ClipRRect(
+                borderRadius: BorderRadius.all(Radius.circular(6)),
+                child: MyImage(
+                  asset: shop.image ?? '',
+                  size: 110,
+                  fit: BoxFit.cover,
+                ),
+              ),
+            ),
+          ),
+          MySpaces.s8.gapHeight,
+          SizedBox(
+            width: 110,
+            child: Text(
+              shop.title ?? '',
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: Lexend.semiBold.copyWith(
+                fontSize: 10,
+              ),
+            ),
+          ),
+          MySpaces.s18.gapHeight,
+          MyGradientButton(
+            onTap: () {},
+            title: context.translate.select,
+            fontSize: 20,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/shop/presentation/ui/widgets/shop_item/styles/boost_style.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class BoostStyle extends StatelessWidget {
+  const BoostStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        children: [
+          GradientText(
+            text: '${shop.number} ${shop.title}',
+            fontSize: 18,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0XFF1B0D31),
+            offset: Offset(0, 1.69),
+          ),
+          Expanded(
+            child: MyImage(
+              asset: shop.image ?? '',
+              size: 110,
+              fit: BoxFit.cover,
+            ),
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: '${shop.price?.priceFormat}',
+            fontSize: 20,
+            icon: MyImage(asset: MyAssets.gem),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/shop/presentation/ui/widgets/shop_item/styles/character_style.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/enum/my_button_type.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class CharacterStyle extends StatelessWidget {
+  const CharacterStyle({super.key, required this.shop});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        spacing: MySpaces.s8,
+        children: [
+          Expanded(
+            child: AnimatedContainer(
+              width: 118,
+              duration: Duration(milliseconds: 200),
+              decoration: BoxDecoration(
+                border:Border.all(width: 2, color: Color(0xFFB37EFA)),
+                borderRadius: BorderRadius.all(Radius.circular(8)),
+                boxShadow: shop.isActive == true
+                    ? [
+                        BoxShadow(
+                          color: Color(0xFFB37EFA),
+                          spreadRadius: 0,
+                          blurRadius: 22,
+                          offset: Offset(0, 0),
+                        ),
+                      ]
+                    : null,
+              ),
+              child: ClipRRect(
+                borderRadius: BorderRadius.all(Radius.circular(6)),
+                child: Stack(
+                  alignment: AlignmentDirectional.bottomEnd,
+                  children: [
+                    MyImage(asset: shop.image ?? '', fit: BoxFit.cover, size: 150,),
+                    if (shop.isActive == true)
+                      PositionedDirectional(
+                        end: MySpaces.s8,
+                        bottom: MySpaces.s8,
+                        child: Stack(
+                          clipBehavior: Clip.none,
+                          children: [
+                            Container(
+                              height: 42,
+                              width: 42,
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.all(
+                                  Radius.circular(5),
+                                ),
+                                color: MyColors.black.withValues(alpha: 0.8),
+                              ),
+                            ),
+                            PositionedDirectional(
+                              top: -0,
+                              end: -5,
+                              child: MyImage(asset: MyAssets.done),
+                            ),
+                          ],
+                        ),
+                      ),
+                    if (shop.isBuy == false)
+                      PositionedDirectional(
+                        end: MySpaces.s8,
+                        bottom: MySpaces.s8,
+                        child: Container(
+                          height: 42,
+                          width: 42,
+                          padding: EdgeInsets.all(MySpaces.s10),
+                          decoration: BoxDecoration(
+                            borderRadius: BorderRadius.all(
+                              Radius.circular(5),
+                            ),
+                            color: MyColors.black.withValues(alpha: 0.8),
+                          ),
+                          child: MyImage(
+                            asset: MyAssets.lock,
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: shop.isActive == true
+                ? context.translate.active
+                : shop.isBuy == true
+                ? context.translate.select
+                : '${shop.price?.priceFormat}',
+            icon: shop.isBuy == true ? null : MyImage(asset: MyAssets.gem),
+            fontSize: 20,
+            type: shop.isActive == true
+                ? MyButtonType.activeType
+                : MyButtonType.defaultType,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/shop/presentation/ui/widgets/shop_item/styles/gem_style.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class GemStyle extends StatelessWidget {
+  const GemStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        children: [
+          GradientText(
+            text: '${shop.number} ${shop.title}',
+            fontSize: 18,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0XFF1B0D31),
+            offset: Offset(0, 1.69),
+          ),
+          Expanded(
+            child: MyImage(
+              asset: shop.image ?? '',
+              size: 110,
+            ),
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: '\$ ${shop.price?.priceFormat}',
+            fontSize: 20,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/shop/presentation/ui/widgets/shop_item/styles/pro_membership_style.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+
+class ProMembershipStyle extends StatelessWidget {
+  const ProMembershipStyle({super.key, required this.shop,});
+
+  final ShopEntity shop;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 190,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          GradientText(
+            text: '${shop.number} ${shop.title}',
+            fontSize: 18,
+            color: Color(0XFF9C8CC2),
+            shadowColor: Color(0XFF1B0D31),
+            offset: Offset(0, 1.69),
+          ),
+          MyImage(
+            asset: shop.image ?? '',
+            size: 90,
+            fit: BoxFit.contain,
+          ),
+          MyGradientButton(
+            onTap: () {},
+            title: '\$ ${shop.price?.priceFormat}',
+            fontSize: 20,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/shop/presentation/ui/widgets/shop_package_entity.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
+import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
+import 'package:shia_game_flutter/features/shop/domain/entity/shop_package_entity.dart';
+import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/shop_item_widget.dart';
+
+class ShopPackageWidget extends StatelessWidget {
+  const ShopPackageWidget({super.key, required this.shopPackage,});
+
+  final ShopPackageEntity shopPackage;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      width: context.widthScreen,
+      borderRadius: BorderRadius.all(Radius.circular(12)),
+      gradient: LinearGradient(
+        begin: Alignment.topCenter,
+        end: Alignment.bottomCenter,
+        colors: [Color(0XFF411183), Color(0XFF2F0E5C)],
+      ),
+      borderGradient: LinearGradient(
+        begin: Alignment.topCenter,
+        end: Alignment.bottomCenter,
+        colors: [Color(0XFF7D44CC), Color(0XFF7D44CC).withValues(alpha: 0)],
+      ),
+      padding: EdgeInsets.all(MySpaces.s10),
+      child: Column(
+        children: [
+          Stack(
+            alignment: Alignment.center,
+            children: [
+              SizedBox(
+                width: context.widthScreen,
+                child: GradientText(
+                  textAlign: TextAlign.center,
+                  text: shopPackage.title,
+                  color: Color(0XFFCAA8FF),
+                  shadowColor: Color(0XFF3E1381),
+                  offset: Offset(0, 1.69),
+                  blurRadius: 0.84,
+                  fontSize: 22,
+                ),
+              ),
+              PositionedDirectional(
+                end: 0,
+                child: MyImage(asset: MyAssets.iconInfo),
+              ),
+            ],
+          ),
+          MySpaces.s30.gapHeight,
+          Wrap(
+            direction: Axis.horizontal,
+            spacing: 7,
+            runSpacing: 7,
+            children: List.generate(
+              shopPackage.shopList?.length ?? 0,
+                  (index) =>
+                  Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      ShopItemWidget(
+                        shop: shopPackage.shopList?[index] ?? ShopEntity(),
+                      ),
+                    ],
+                  ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/l10n/app_en.arb

@@ -9,5 +9,16 @@
   "custom_league": "Custom League",
   "friends_battle": "Friends Battle",
   "logout": "Log out",
-  "delete_account": "Delete Account"
+  "delete_account": "Delete Account",
+  "username": "User Name",
+  "your_region": "Your Region",
+  "change_profile": "Change Profile",
+  "battle_league": "Battle League",
+  "answer_win": "The faster you answer, the winner",
+  "ongoing": "ongoing",
+  "online": "online",
+  "battle_cast": "Battle Cast",
+  "no_one_online": "No one's online",
+  "active": "Active",
+  "select": "Select"
 }

lib/l10n/app_localizations.dart

@@ -153,6 +153,72 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Delete Account'**
   String get delete_account;
+
+  /// No description provided for @username.
+  ///
+  /// In en, this message translates to:
+  /// **'User Name'**
+  String get username;
+
+  /// No description provided for @your_region.
+  ///
+  /// In en, this message translates to:
+  /// **'Your Region'**
+  String get your_region;
+
+  /// No description provided for @change_profile.
+  ///
+  /// In en, this message translates to:
+  /// **'Change Profile'**
+  String get change_profile;
+
+  /// No description provided for @battle_league.
+  ///
+  /// In en, this message translates to:
+  /// **'Battle League'**
+  String get battle_league;
+
+  /// No description provided for @answer_win.
+  ///
+  /// In en, this message translates to:
+  /// **'The faster you answer, the winner'**
+  String get answer_win;
+
+  /// No description provided for @ongoing.
+  ///
+  /// In en, this message translates to:
+  /// **'ongoing'**
+  String get ongoing;
+
+  /// No description provided for @online.
+  ///
+  /// In en, this message translates to:
+  /// **'online'**
+  String get online;
+
+  /// No description provided for @battle_cast.
+  ///
+  /// In en, this message translates to:
+  /// **'Battle Cast'**
+  String get battle_cast;
+
+  /// No description provided for @no_one_online.
+  ///
+  /// In en, this message translates to:
+  /// **'No one\'s online'**
+  String get no_one_online;
+
+  /// No description provided for @active.
+  ///
+  /// In en, this message translates to:
+  /// **'Active'**
+  String get active;
+
+  /// No description provided for @select.
+  ///
+  /// In en, this message translates to:
+  /// **'Select'**
+  String get select;
 }
 
 class _AppLocalizationsDelegate

lib/l10n/app_localizations_en.dart

@@ -37,4 +37,37 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get delete_account => 'Delete Account';
+
+  @override
+  String get username => 'User Name';
+
+  @override
+  String get your_region => 'Your Region';
+
+  @override
+  String get change_profile => 'Change Profile';
+
+  @override
+  String get battle_league => 'Battle League';
+
+  @override
+  String get answer_win => 'The faster you answer, the winner';
+
+  @override
+  String get ongoing => 'ongoing';
+
+  @override
+  String get online => 'online';
+
+  @override
+  String get battle_cast => 'Battle Cast';
+
+  @override
+  String get no_one_online => 'No one\'s online';
+
+  @override
+  String get active => 'Active';
+
+  @override
+  String get select => 'Select';
 }