feat(ui): add pricing card

packages/wyatt_ui_kit/example/lib/cards/cards.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_kit_example/cards/information_card/information_cards.dart';
 import 'package:wyatt_ui_kit_example/cards/portfolio_card/portfolio_cards.dart';
+import 'package:wyatt_ui_kit_example/cards/pricing_card/pricing_cards.dart';
 import 'package:wyatt_ui_kit_example/cards/quote_card/quote_cards.dart';
 import 'package:wyatt_ui_kit_example/cards/skill_card/skill_cards.dart';
 import 'package:wyatt_ui_kit_example/demo_page.dart';
@@ -24,6 +25,8 @@ class Cards extends DemoPage {
             ),
           ),
           const Gap(20),
+          const PricingCards(),
+          const Gap(20),
           const InformationCards(),
           const Gap(20),
           const PortfolioCards(),

packages/wyatt_ui_kit/example/lib/cards/pricing_card/pricing_cards.dart

@@ -0,0 +1,148 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class PricingCards extends StatelessWidget {
+  const PricingCards({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Pricing Cards',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              PricingCard(
+                title: const PricingLine(
+                  data: TextWrapper('Lorem Ipsum'),
+                  icon: Icon(
+                    Icons.ac_unit_rounded,
+                  ),
+                ),
+                pricing: const Pricing(
+                  price: TextWrapper('450€'),
+                  period: TextWrapper('/ jour'),
+                  hasAsterisk: true,
+                ),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '
+                    'ullamco Lorem magna ipsum. Ullamco cupidatat velit '),
+                features: const [
+                  PricingLine(
+                    icon: Icon(
+                      Icons.ac_unit_rounded,
+                    ),
+                    data: TextWrapper(
+                      'Nulla labore aliquip dolor aliqua elit anim quis non officia laboris ad.',
+                    ),
+                  ),
+                  PricingLine(
+                    icon: Icon(
+                      Icons.ac_unit_rounded,
+                    ),
+                    data: TextWrapper(
+                      'Eu pariatur non et sint minim aute pariatur amet officia.',
+                    ),
+                  ),
+                ],
+                cta: context.components.flatButtonComponent.call(
+                  label: const TextWrapper(
+                    'Contactez-nous',
+                    style: TextStyle(color: Colors.white),
+                  ),
+                  normalStyle: FlatButtonThemeExtensionImpl.dark(
+                    theme: Theme.of(context),
+                  ).normalStyle?.copyWith(
+                        backgroundColors:
+                            const MultiColor(Constants.blueBtnGradient),
+                        borderColors:
+                            const MultiColor(Constants.blueBtnGradient),
+                      ),
+                ),
+              ),
+              const Gap(20),
+              PricingCard(
+                title: const PricingLine(
+                  data: TextWrapper('Lorem Ipsum'),
+                  icon: Icon(
+                    Icons.ac_unit_rounded,
+                  ),
+                ),
+                pricing: const Pricing(
+                  price: TextWrapper('350€'),
+                  period: TextWrapper('/ jour'),
+                  hasAsterisk: true,
+                ),
+                features: const [
+                  PricingLine(
+                    icon: Icon(
+                      Icons.ac_unit_rounded,
+                    ),
+                    data: TextWrapper(
+                      'Nulla labore aliquip dolor aliqua elit anim quis non officia laboris ad.',
+                    ),
+                  ),
+                  PricingLine(
+                    icon: Icon(
+                      Icons.ac_unit_rounded,
+                    ),
+                    data: TextWrapper(
+                      'Eu pariatur non et sint minim aute pariatur amet officia.',
+                    ),
+                  ),
+                  PricingLine(
+                    icon: Icon(
+                      Icons.ac_unit_rounded,
+                    ),
+                    data: TextWrapper(
+                      'Nulla labore aliquip dolor aliqua elit anim quis non officia laboris ad.',
+                    ),
+                  ),
+                ],
+                cta: context.components.flatButtonComponent.call(
+                  label: const TextWrapper(
+                    'Contactez-nous',
+                    style: TextStyle(color: Colors.white),
+                  ),
+                  normalStyle: FlatButtonThemeExtensionImpl.dark(
+                    theme: Theme.of(context),
+                  ).normalStyle?.copyWith(
+                        backgroundColors:
+                            const MultiColor(Constants.purpleGradient),
+                        borderColors:
+                            const MultiColor(Constants.purpleGradient),
+                      ),
+                ),
+              ),
+            ],
+          ),
+          const Gap(20),
+        ],
+      );
+}

packages/wyatt_ui_kit/example/lib/rich_text_builders/rich_text_builders.dart

@@ -27,7 +27,7 @@ class RichTextBuilders extends DemoPage {
 
   @override
   Widget build(BuildContext context) => SelectionArea(
-    child: ListView(
+        child: ListView(
           cacheExtent: 1000,
           children: [
             const Gap(20),
@@ -61,5 +61,5 @@ class RichTextBuilders extends DemoPage {
             const Gap(20),
           ],
         ),
-  );
+      );
 }

packages/wyatt_ui_kit/example/lib/theme/constants.dart

@@ -25,6 +25,9 @@ abstract class Constants {
   static const blue3 = Color(0xFF1A84F7);
   static const blue4 = Color(0xFF1344E4);
 
+  static const blue1Btn = Color(0xFF3C97FB);
+  static const blue2Btn = Color(0xFF446DF4);
+
   static const grey1 = Color(0xFF60656A);
   static const grey2 = Color(0xFF383C40);
 
@@ -37,10 +40,15 @@ abstract class Constants {
   static const red1 = Color(0xFFFB5E3C);
   static const red2 = Color(0xFFF44464);
 
+  static const purple1 = Color(0xFFB79EFF);
+  static const purple2 = Color(0xFF6865F2);
+
   static const blueGradient = [blue1, blue2];
+  static const blueBtnGradient = [blue1Btn, blue2Btn];
   static const blueDarkGradient = [blue3, blue4];
   static const greyGradient = [grey1, grey2];
   static const greyDarkGradient = [grey3, grey4];
   static const greenGradient = [green1, green2];
   static const redGradient = [red1, red2];
+  static const purpleGradient = [purple1, purple2];
 }