fix: about us dialog

assets/images/dialog.svg

@@ -1,14 +0,0 @@
-<svg width="1001" height="910" viewBox="0 0 1001 910" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M29.3358 39.0402C-5.0571 66.568 -10.3437 848.003 19.74 883.396C47.7909 916.268 910.134 918.89 964.203 884.707C1018.27 850.524 1007.3 51.8463 957.049 20.2851C906.802 -11.2762 85.519 -6.0329 29.3358 39.0402Z" fill="url(#paint0_linear_2006_130)"/>
-<path d="M29.3347 41.6378C-5.05819 68.8801 -10.3429 833.638 19.7407 868.664C47.7917 901.195 910.135 903.789 964.204 869.961C1018.27 836.133 1007.3 54.3108 957.049 23.0769C906.801 -8.15707 85.5179 -2.96789 29.3347 41.6378Z" fill="url(#paint1_linear_2006_130)"/>
-<defs>
-<linearGradient id="paint0_linear_2006_130" x1="500.022" y1="909.224" x2="500.022" y2="671.255" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8B9AD1"/>
-<stop offset="1" stop-color="#CEE0FF"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2006_130" x1="500.021" y1="894.235" x2="500.021" y2="658.733" gradientUnits="userSpaceOnUse">
-<stop stop-color="#CADCFF"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-</defs>
-</svg>

assets/images/new_horizon.svg

@@ -0,0 +1,37 @@
+<svg width="222" height="47" viewBox="0 0 222 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.502 12.3199H7.66296V39.8126L12.8033 38.9112V19.7815L23.3833 37.3588L30.47 36.5576V12.2197H25.3796V32.2008L13.502 12.3199Z" fill="url(#paint0_linear_488_3922)"/>
+<path d="M83.9192 19.0801H78.4296L74.6367 31.6997L70.9936 19.0801H67.051L63.5077 31.6997L59.5152 19.0801H54.1753L59.615 33.7529L66.9013 33.3022L69.0971 26.2412L71.0934 33.1519L78.8787 32.7513L83.9192 19.0801Z" fill="url(#paint1_linear_488_3922)"/>
+<path d="M88.86 12.3196H94.0502V23.4369H104.231V12.2695H109.321V32.0002H104.181V28.1943H94.0502V32.2506L88.9099 32.4008L88.86 12.3196Z" fill="#CAC8C8"/>
+<path d="M118.255 32.0507C118.255 32.0507 115.809 24.4388 123.095 23.287C123.794 23.1869 124.493 23.1869 125.191 23.3371C127.387 23.7377 131.53 25.4404 129.583 32.3011H134.873C134.873 32.3011 137.967 19.8317 124.992 18.5797C124.094 18.4796 123.095 18.3794 121.997 18.6298C118.704 19.381 111.517 22.2354 113.014 32.0507H118.255Z" fill="#CAC8C8"/>
+<path d="M147.1 23.3363L147 18.5289C147 18.5289 143.507 18.4287 142.11 20.9326V19.1298H137.319V32.4505L142.459 32.7009V27.9936C142.509 28.0437 142.359 23.3864 147.1 23.3363Z" fill="#CAC8C8"/>
+<path d="M148.897 19.1797H154.037V33.2516L148.847 33.0012L148.897 19.1797Z" fill="#CAC8C8"/>
+<path d="M157.181 19.1299H171.604V23.5367L163.469 33.8027L157.68 33.4521L165.516 23.4366H157.131L157.181 19.1299Z" fill="#CAC8C8"/>
+<path d="M185.528 35.6559C185.528 35.6559 190.568 34.6544 190.568 29.6967C190.568 24.7389 186.825 23.3368 184.729 23.2867C182.384 23.1865 178.291 25.0394 178.291 29.4963C178.291 33.9533 182.384 35.3554 182.384 35.3554L174.399 34.6043C174.399 34.6043 173.251 32.3007 173.251 29.2459C173.251 26.2413 175.696 18.5293 184.58 18.5293C193.463 18.5293 195.759 25.5903 195.759 30.2976C195.759 35.0049 193.213 36.4071 193.213 36.4071L185.528 35.6559Z" fill="#CAC8C8"/>
+<path d="M197.954 19.1302H202.645V20.933C202.645 20.933 204.791 18.5293 208.634 18.5293C212.477 18.5293 216.719 21.584 216.719 26.692C216.719 31.7999 216.719 39.7623 216.719 39.7623L211.629 38.961V28.5449C211.629 28.5449 212.078 23.2366 207.337 23.2366C202.546 23.2366 203.095 28.4447 203.095 28.4447V37.7592L197.904 37.008V19.1302H197.954Z" fill="#CAC8C8"/>
+<path d="M217.617 41.5147C182.733 38.0593 147.25 37.0077 112.216 37.0077C83.7696 37.0077 54.9239 37.7588 26.5274 39.812C22.8344 40.1125 17.0453 40.5632 13.3522 40.9638C11.1564 41.1641 8.96052 41.4145 6.76466 41.715L6.71476 41.4145C11.0566 40.5632 15.3984 39.9623 19.7901 39.3613C67.8995 33.4021 116.658 32.8512 165.066 35.6556C178.291 36.5069 191.467 37.6587 204.592 39.3112C208.984 39.8621 213.325 40.463 217.667 41.2643C217.667 41.2142 217.617 41.5147 217.617 41.5147Z" fill="#CBC8C8"/>
+<path d="M151.492 6.25977L156.532 11.3176L151.442 16.4256L146.302 11.2675L151.492 6.25977Z" fill="url(#paint2_linear_488_3922)"/>
+<path d="M155.484 6.25977L160.475 11.3176L155.385 16.4756L154.736 15.8246L159.227 11.3176L154.836 6.8607L155.484 6.25977Z" fill="url(#paint3_linear_488_3922)"/>
+<path d="M43.5453 18.4287C33.2647 18.4287 34.712 29.5961 34.712 29.5961C34.712 29.5961 34.8617 33.9028 37.1075 35.5553L51.5303 34.4536C51.5303 34.4536 52.4785 33.2517 52.4785 32.6007L47.2883 31.8496C47.2883 31.8496 46.5397 34.8542 43.8947 34.4035C39.7026 33.6524 39.8024 29.7463 39.8024 29.7463L52.728 29.4458C52.728 29.4458 53.826 18.4287 43.5453 18.4287ZM39.7026 25.8402L39.6527 25.9404C39.6527 25.9404 40.3514 21.834 43.7949 21.834C47.2384 21.834 47.6875 25.8402 47.6875 25.8402H39.7026Z" fill="url(#paint4_linear_488_3922)"/>
+<defs>
+<linearGradient id="paint0_linear_488_3922" x1="19.0534" y1="12.2374" x2="19.0534" y2="39.7876" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C3AC7B"/>
+<stop offset="1" stop-color="#998863"/>
+</linearGradient>
+<linearGradient id="paint1_linear_488_3922" x1="69.0575" y1="19.086" x2="69.0575" y2="33.7558" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C3AC7B"/>
+<stop offset="1" stop-color="#998863"/>
+</linearGradient>
+<linearGradient id="paint2_linear_488_3922" x1="151.432" y1="6.24209" x2="151.432" y2="16.4197" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C3AC7B"/>
+<stop offset="1" stop-color="#998863"/>
+</linearGradient>
+<linearGradient id="paint3_linear_488_3922" x1="157.624" y1="6.27153" x2="157.624" y2="16.4565" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C3AC7B"/>
+<stop offset="1" stop-color="#998863"/>
+</linearGradient>
+<linearGradient id="paint4_linear_488_3922" x1="43.6975" y1="18.4081" x2="43.6975" y2="35.5524" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C3AC7B"/>
+<stop offset="1" stop-color="#998863"/>
+</linearGradient>
+</defs>
+</svg>

lib/common_ui/resources/my_assets.dart

@@ -5,7 +5,6 @@ class MyAssets {
 
   static const String backgroundIntro = 'assets/images/background_intro.png';
   static const String closeBtn = 'assets/images/close_btn.svg';
-  static const String dialog = 'assets/images/dialog.svg';
   static const String hadiHoda = 'assets/images/hadi_hoda.png';
   static const String musicOff = 'assets/images/music_off.svg';
   static const String musicOn = 'assets/images/music_on.svg';
@@ -16,4 +15,6 @@ class MyAssets {
   static const String youtube = 'assets/images/youtube.svg';
   static const String instagram = 'assets/images/instagram.svg';
   static const String language = 'assets/images/language.svg';
+  static const String newHorizon = 'assets/images/new_horizon.svg';
+  static const String khadijeLogo = 'assets/images/khadije_logo.png';
 }

lib/core/routers/my_routes.dart

@@ -7,9 +7,7 @@ import 'package:hadi_hoda_flutter/init_bindings.dart';
 
 class Routes {
   static const Routes _i = Routes._internal();
-
   const Routes._internal();
-
   factory Routes() => _i;
 
   static const String introPage = '/intro_page';

lib/core/widgets/about_us_dialog.dart → lib/core/widgets/about_us_dialog/about_us_dialog.dart

@@ -1,14 +1,13 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
-import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
 import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart';
-import 'package:hadi_hoda_flutter/core/utils/gap.dart';
 import 'package:hadi_hoda_flutter/core/utils/my_image.dart';
 import 'package:hadi_hoda_flutter/core/utils/my_localization.dart';
-import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
+import 'package:hadi_hoda_flutter/core/widgets/about_us_dialog/styles/background.dart';
 
 Future<void> showAboutUsDialog({required BuildContext context}) async {
   await showDialog(
@@ -29,34 +28,14 @@ class AboutUsDialog extends StatelessWidget {
       body: BackdropFilter(
         filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
         child: Center(
-          child: SizedBox(
-            height: context.widthScreen,
-            width: context.widthScreen - 20,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 18),
             child: Stack(
-              alignment: AlignmentDirectional.center,
               clipBehavior: Clip.none,
               children: [
-                MyImage(image: MyAssets.dialog),
-                Positioned(
-                  top: 10,
-                  right: 30,
-                  child: GestureDetector(
-                    onTap: () {
-                      Navigator.pop(context);
-                    },
-                    child: MyImage(image: MyAssets.closeBtn, size: 40),
-                  ),
-                ),
-                Padding(
-                  padding: EdgeInsets.only(
-                    top: 50,
-                    left: 35,
-                    right: 35,
-                    bottom: 60,
-                  ),
+                AboutUSDialogBackground(
                   child: Column(
-                    mainAxisSize: MainAxisSize.max,
-                    mainAxisAlignment: MainAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
                       Text(
                         context.translate.about_us,
@@ -66,32 +45,42 @@ class AboutUsDialog extends StatelessWidget {
                           fontWeight: FontWeight.w600,
                         ),
                       ),
-                      MySpaces.s14.gapHeight,
-                      Expanded(
-                        child: SingleChildScrollView(
-                          child: Text(
-                            context.translate.about_us_desc,
-                            style: GoogleFonts.marhey(
-                              color: Color(0XFF322386),
-                              fontSize: 15,
-                              fontWeight: FontWeight.w500,
-                            ),
-                          ),
+                      Text(
+                        context.translate.about_us_desc,
+                        style: GoogleFonts.marhey(
+                          color: Color(0XFF494178),
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
                         ),
                       ),
+                      MyImage(
+                        image: MyAssets.newHorizon,
+                      ),
+                      MyImage(
+                        image: MyAssets.khadijeLogo,
+                      ),
                       Row(
                         mainAxisAlignment: MainAxisAlignment.center,
                         spacing: 20,
                         children: [
-                          MyImage(image: MyAssets.facebook, size: 40),
-                          MyImage(image: MyAssets.instagram, size: 40),
-                          MyImage(image: MyAssets.whatsapp, size: 40),
-                          MyImage(image: MyAssets.youtube, size: 40),
+                          MyImage(image: MyAssets.facebook, size: 33),
+                          MyImage(image: MyAssets.instagram, size: 33),
+                          MyImage(image: MyAssets.whatsapp, size: 33),
+                          MyImage(image: MyAssets.youtube, size: 33),
                         ],
                       ),
                     ],
                   ),
                 ),
+                Positioned(
+                  right: 30,
+                  top: -12,
+                  child: GestureDetector(
+                    onTap: context.pop,
+                    behavior: HitTestBehavior.opaque,
+                    child: MyImage(image: MyAssets.closeBtn, size: 40),
+                  ),
+                ),
               ],
             ),
           ),

lib/core/widgets/about_us_dialog/styles/background.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
+
+class AboutUSDialogBackground extends StatelessWidget {
+  const AboutUSDialogBackground({super.key, this.child});
+
+  final Widget? child;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipPath(
+      clipper: _BottomShapeClipper(),
+      child: Container(
+        width: context.widthScreen,
+        height: 525,
+        padding: EdgeInsets.all(30),
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.bottomCenter,
+            end: Alignment.topCenter,
+            colors: [
+              Color(0xFFCADCFF),
+              Colors.white,
+              Colors.white,
+              Colors.white,
+            ],
+          ),
+        ),
+        child: child,
+      ),
+    );
+  }
+}
+
+class _BottomShapeClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    final path = Path();
+    path.moveTo(size.width * 0.0296831, size.height * 0.0431190);
+    path.cubicTo(
+      size.width * -0.0046256,
+      size.height * 0.0736941,
+      size.width * -0.0099023,
+      size.height * 0.932004,
+      size.width * 0.0201127,
+      size.height * 0.971318,
+    );
+    path.cubicTo(
+      size.width * 0.0476063,
+      size.height * 1.00783,
+      size.width * 0.908328,
+      size.height * 1.01074,
+      size.width * 0.962267,
+      size.height * 0.972775,
+    );
+    path.cubicTo(
+      size.width * 1.01620,
+      size.height * 0.934810,
+      size.width * 1.00525,
+      size.height * 0.0573423,
+      size.width * 0.955130,
+      size.height * 0.0222874,
+    );
+    path.cubicTo(
+      size.width * 0.905007,
+      size.height * -0.0127694,
+      size.width * 0.0857731,
+      size.height * -0.0135838,
+      size.width * 0.0296831,
+      size.height * 0.0431190,
+    );
+    path.close();
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) {
+    return true;
+  }
+}

lib/features/intro/presentation/ui/intro_page.dart

@@ -3,7 +3,7 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
 import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart';
 import 'package:hadi_hoda_flutter/core/utils/my_image.dart';
 import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
-import 'package:hadi_hoda_flutter/core/widgets/about_us_dialog.dart';
+import 'package:hadi_hoda_flutter/core/widgets/about_us_dialog/about_us_dialog.dart';
 
 class IntroPage extends StatelessWidget {
   const IntroPage({super.key});

lib/l10n/app_en.arb

@@ -1,4 +1,4 @@
 {
   "about_us": "About us",
-  "about_us_desc" : "Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles."
+  "about_us_desc" : "Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build."
 }

lib/l10n/app_localizations.dart

@@ -103,7 +103,7 @@ abstract class AppLocalizations {
   /// No description provided for @about_us_desc.
   ///
   /// In en, this message translates to:
-  /// **'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.'**
+  /// **'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build.'**
   String get about_us_desc;
 }
 

lib/l10n/app_localizations_en.dart

@@ -13,5 +13,5 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get about_us_desc =>
-      'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.';
+      'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build.';
 }