feat(ui_kit): add quote / skill / portfolio cards (#126)

2023-02-10 16:01:07 +01:00 · 2023-02-10 16:01:07 +01:00 · 55822ad870
commit 55822ad870
parent a563bd1fe3
18 changed files with 1282 additions and 6 deletions
--- a/packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.dart
@ -46,9 +46,9 @@ abstract class PortfolioCardComponent extends CardComponent

  final bool? showImagesOnTop;
  final List<TextWrapper>? keyword;
-  final List<String>? assets;
+  final List<Widget>? assets;
  final TextWrapper? description;
-  final String? logo;
+  final Widget? logo;
  final TextWrapper? projectName;
  final TextWrapper? subtitle;
  final List<Widget>? ctas;
--- a/packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.g.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.g.dart
@ -10,11 +10,11 @@ abstract class $PortfolioCardComponentCWProxy {
  PortfolioCardComponent showImagesOnTop(bool? showImagesOnTop);
  PortfolioCardComponent keyword(List<TextWrapper>? keyword);
  PortfolioCardComponent description(TextWrapper? description);
-  PortfolioCardComponent logo(String? logo);
+  PortfolioCardComponent logo(Widget? logo);
  PortfolioCardComponent projectName(TextWrapper? projectName);
  PortfolioCardComponent subtitle(TextWrapper? subtitle);
  PortfolioCardComponent ctas(List<Widget>? ctas);
-  PortfolioCardComponent assets(List<String>? assets);
+  PortfolioCardComponent assets(List<Widget>? assets);
  PortfolioCardComponent radius(double? radius);
  PortfolioCardComponent padding(double? padding);
  PortfolioCardComponent borderColors(List<Color>? borderColors);
@ -28,11 +28,11 @@ abstract class $PortfolioCardComponentCWProxy {
    bool? showImagesOnTop,
    List<TextWrapper>? keyword,
    TextWrapper? description,
-    String? logo,
+    Widget? logo,
    TextWrapper? projectName,
    TextWrapper? subtitle,
    List<Widget>? ctas,
-    List<String>? assets,
+    List<Widget>? assets,
    double? radius,
    double? padding,
    List<Color>? borderColors,
--- a/packages/wyatt_ui_kit/example/lib/cards/cards.dart
+++ b/packages/wyatt_ui_kit/example/lib/cards/cards.dart
@ -1,6 +1,9 @@
 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/quote_card/quote_cards.dart';
+import 'package:wyatt_ui_kit_example/cards/skill_card/skill_cards.dart';

 class Cards extends StatelessWidget {
  const Cards({super.key});
@ -17,6 +20,13 @@ class Cards extends StatelessWidget {
          ),
          const Gap(20),
          const InformationCards(),
+          const Gap(20),
+          const PortfolioCards(),
+          const Gap(20),
+          const QuoteCards(),
+          const Gap(20),
+          const SkillCards(),
+          const Gap(20),
        ],
      );
 }
--- a/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart
+++ b/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart
@ -0,0 +1,177 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class PortfolioCards extends StatelessWidget {
+  const PortfolioCards({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Portfolio Cards',
+            style: Theme.of(context)
+                .textTheme
+                .titleMedium!
+                .copyWith(color: Colors.white),
+          ),
+          const Gap(20),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              PortfolioCard(
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper('Flutter Project.'),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper('Developpement de 8 mois.'),
+                ctas: [
+                  CupertinoButton(
+                    color: Colors.grey.withOpacity(0.3),
+                    padding: EdgeInsets.zero,
+                    onPressed: () {},
+                    child: const Icon(
+                      Icons.settings,
+                      color: Colors.grey,
+                    ),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+                keyword: const [
+                  TextWrapper('UI Design'),
+                  TextWrapper('Developpement'),
+                  TextWrapper('Deploiement')
+                ],
+              ),
+              const Gap(20),
+              PortfolioCard(
+                showImagesOnTop: true,
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper('Flutter Project.'),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper('Developpement de 8 mois.'),
+                ctas: [
+                  CupertinoButton(
+                    color: Colors.grey.withOpacity(0.3),
+                    padding: EdgeInsets.zero,
+                    onPressed: () {},
+                    child: const Icon(
+                      Icons.settings,
+                      color: Colors.grey,
+                    ),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+              )
+            ],
+          ),
+          const Gap(20),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              PortfolioCard(
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper('Flutter Project.'),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper('Developpement de 8 mois.'),
+                ctas: [
+                  CupertinoButton(
+                    color: Colors.grey.withOpacity(0.3),
+                    padding: EdgeInsets.zero,
+                    onPressed: () {},
+                    child: const Icon(
+                      Icons.settings,
+                      color: Colors.grey,
+                    ),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  ),
+                  Image.asset(
+                    'assets/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+                keyword: const [
+                  TextWrapper('UI Design'),
+                  TextWrapper('Developpement'),
+                  TextWrapper('Deploiement')
+                ],
+              ),
+              const Gap(20),
+              PortfolioCard(
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper(
+                  'Flutter Project.',
+                  gradient: [
+                    Colors.blue,
+                    Colors.green,
+                  ],
+                ),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper('Developpement de 8 mois.'),
+                ctas: [
+                  CupertinoButton(
+                    color: Colors.grey.withOpacity(0.3),
+                    padding: EdgeInsets.zero,
+                    onPressed: () {},
+                    child: const Icon(
+                      Icons.settings,
+                      color: Colors.grey,
+                    ),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  ),
+                  Image.asset(
+                    'assets/mockup_2.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  ),
+                  Image.asset(
+                    'assets/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+                keyword: const [
+                  TextWrapper('UI Design'),
+                  TextWrapper('Developpement'),
+                  TextWrapper('Deploiement')
+                ],
+              ),
+            ],
+          ),
+        ],
+      );
+}
--- a/packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart
+++ b/packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart
@ -0,0 +1,66 @@
+// 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_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class QuoteCards extends StatelessWidget {
+  const QuoteCards({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Quote Cards',
+            style: Theme.of(context)
+                .textTheme
+                .titleMedium!
+                .copyWith(color: Colors.white),
+          ),
+          const Gap(20),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              QuoteCard(
+                quote: '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 '
+                    .wrap(),
+              ),
+              const Gap(20),
+              QuoteCard(
+                quote: '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 '
+                    .wrap(gradient: [Colors.red, Colors.orange]),
+                avatar: const FlutterLogo(
+                  size: 40,
+                ),
+                name: 'John Doe'.wrap(),
+                subtitle: 'Agence anonyme'.wrap(),
+              ),
+            ],
+          ),
+          const Gap(20),
+        ],
+      );
+}
--- a/packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart
+++ b/packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart
@ -0,0 +1,85 @@
+// 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_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class SkillCards extends StatelessWidget {
+  const SkillCards({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Skill Cards',
+            style: Theme.of(context)
+                .textTheme
+                .titleMedium!
+                .copyWith(color: Colors.white),
+          ),
+          const Gap(20),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              SkillCard(
+                gradient: const [Colors.red, Colors.orange],
+                icon: Icons.ac_unit_sharp,
+                title: 'Lorem Ipsum'.wrap(),
+                description: '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 '
+                    .wrap(),
+                skills: [
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text(
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute ',
+                  ),
+                ],
+              ),
+              const Gap(20),
+              SkillCard(
+                gradient: const [Colors.blue, Colors.green],
+                icon: Icons.ac_unit_sharp,
+                title: 'Lorem Ipsum'.wrap(),
+                description: '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 '
+                    .wrap(),
+                skills: [
+                  TextWrapper.text('Firebase'),
+                  const TextWrapper(
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute ',
+                    gradient: [Colors.red, Colors.orange],
+                  ),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                ],
+              ),
+            ],
+          ),
+          const Gap(20),
+        ],
+      );
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/cards.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/cards.dart
@ -15,3 +15,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.

 export './information_card/information_card.dart';
+export './portfolio_card/portfolio_card.dart';
+export './quote_card/quote_card.dart';
+export './skill_card/skill_card.dart';
--- a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.dart
@ -0,0 +1,111 @@
+// 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_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/cards/portfolio_card/widgets/portfolio_card_description.dart';
+import 'package:wyatt_ui_kit/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart';
+import 'package:wyatt_ui_kit/src/components/cards/portfolio_card/widgets/portfolio_card_images.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
+
+part 'portfolio_card.g.dart';
+
+@ComponentCopyWithExtension()
+class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
+  const PortfolioCard({
+    super.showImagesOnTop,
+    super.keyword,
+    super.description,
+    super.logo,
+    super.projectName,
+    super.subtitle,
+    super.ctas,
+    super.assets,
+    super.radius,
+    super.padding,
+    super.borderColors,
+    super.backgroundColor,
+    super.minSize,
+    super.maxSize = const Size(330, double.infinity),
+    super.shadow,
+    super.background,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => CardWrapper(
+        background: background,
+        padding: padding,
+        backgroundColor: backgroundColor,
+        borderColors: borderColors,
+        shadow: shadow,
+        maxSize: maxSize,
+        minSize: minSize,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (showImagesOnTop ?? false) ...[
+              if (assets != null) ...[
+                PortfolioCardImages(
+                  radius: radius,
+                  maxSize: maxSize,
+                  images: assets,
+                ),
+                const Gap(20),
+              ],
+              PortfolioCardDescription(
+                description: description,
+                ctas: ctas,
+              ),
+              const Gap(10),
+              PortfolioCardHeader(
+                logo: logo,
+                padding: padding,
+                radius: radius,
+                projectName: projectName,
+                subtitle: subtitle,
+                keyword: keyword,
+              ),
+            ] else ...[
+              PortfolioCardHeader(
+                logo: logo,
+                padding: padding,
+                radius: radius,
+                projectName: projectName,
+                subtitle: subtitle,
+                keyword: keyword,
+              ),
+              const Gap(10),
+              if (assets != null) ...[
+                PortfolioCardImages(
+                  radius: radius,
+                  maxSize: maxSize,
+                  images: assets,
+                ),
+                const Gap(20),
+              ],
+              PortfolioCardDescription(
+                description: description,
+                ctas: ctas,
+              ),
+            ],
+          ],
+        ),
+      );
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.g.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.g.dart
@ -0,0 +1,95 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'portfolio_card.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $PortfolioCardCWProxyImpl implements $PortfolioCardComponentCWProxy {
+  const $PortfolioCardCWProxyImpl(this._value);
+  final PortfolioCard _value;
+  @override
+  PortfolioCard showImagesOnTop(bool? showImagesOnTop) =>
+      this(showImagesOnTop: showImagesOnTop);
+  @override
+  PortfolioCard keyword(List<TextWrapper>? keyword) => this(keyword: keyword);
+  @override
+  PortfolioCard description(TextWrapper? description) =>
+      this(description: description);
+  @override
+  PortfolioCard logo(Widget? logo) => this(logo: logo);
+  @override
+  PortfolioCard projectName(TextWrapper? projectName) =>
+      this(projectName: projectName);
+  @override
+  PortfolioCard subtitle(TextWrapper? subtitle) => this(subtitle: subtitle);
+  @override
+  PortfolioCard ctas(List<Widget>? ctas) => this(ctas: ctas);
+  @override
+  PortfolioCard assets(List<Widget>? assets) => this(assets: assets);
+  @override
+  PortfolioCard radius(double? radius) => this(radius: radius);
+  @override
+  PortfolioCard padding(double? padding) => this(padding: padding);
+  @override
+  PortfolioCard borderColors(List<Color>? borderColors) =>
+      this(borderColors: borderColors);
+  @override
+  PortfolioCard backgroundColor(Color? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  PortfolioCard minSize(Size? minSize) => this(minSize: minSize);
+  @override
+  PortfolioCard maxSize(Size? maxSize) => this(maxSize: maxSize);
+  @override
+  PortfolioCard shadow(BoxShadow? shadow) => this(shadow: shadow);
+  @override
+  PortfolioCard background(Widget? background) => this(background: background);
+  @override
+  PortfolioCard key(Key? key) => this(key: key);
+  @override
+  PortfolioCard call({
+    bool? showImagesOnTop,
+    List<TextWrapper>? keyword,
+    TextWrapper? description,
+    Widget? logo,
+    TextWrapper? projectName,
+    TextWrapper? subtitle,
+    List<Widget>? ctas,
+    List<Widget>? assets,
+    double? radius,
+    double? padding,
+    List<Color>? borderColors,
+    Color? backgroundColor,
+    Size? minSize,
+    Size? maxSize,
+    BoxShadow? shadow,
+    Widget? background,
+    Key? key,
+  }) =>
+      PortfolioCard(
+        showImagesOnTop: showImagesOnTop ?? _value.showImagesOnTop,
+        keyword: keyword ?? _value.keyword,
+        description: description ?? _value.description,
+        logo: logo ?? _value.logo,
+        projectName: projectName ?? _value.projectName,
+        subtitle: subtitle ?? _value.subtitle,
+        ctas: ctas ?? _value.ctas,
+        assets: assets ?? _value.assets,
+        radius: radius ?? _value.radius,
+        padding: padding ?? _value.padding,
+        borderColors: borderColors ?? _value.borderColors,
+        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        minSize: minSize ?? _value.minSize,
+        maxSize: maxSize ?? _value.maxSize,
+        shadow: shadow ?? _value.shadow,
+        background: background ?? _value.background,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $PortfolioCardCWMixin on Component {
+  $PortfolioCardComponentCWProxy get copyWith =>
+      $PortfolioCardCWProxyImpl(this as PortfolioCard);
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_description.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_description.dart
@ -0,0 +1,60 @@
+// 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_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
+import 'package:wyatt_ui_kit/src/core/helpers/helpers.dart';
+
+class PortfolioCardDescription extends StatelessWidget {
+  const PortfolioCardDescription({
+    this.description,
+    this.ctas,
+    super.key,
+  });
+
+  final TextWrapper? description;
+  final List<Widget>? ctas;
+
+  @override
+  Widget build(BuildContext context) => Row(
+        children: [
+          if (description != null) ...[
+            Expanded(
+              child: Text(
+                description!.text,
+                style: description!.style ?? context.textTheme.bodyMedium,
+              ).toGradient(
+                LinearGradientHelper.fromNullableColors(
+                  description!.gradient,
+                ),
+              ),
+            ),
+          ],
+          if (ctas != null) ...[
+            const Gap(5),
+            ...ctas!.map(
+              (e) => Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 5),
+                child: e,
+              ),
+            ),
+          ],
+        ],
+      );
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart
@ -0,0 +1,99 @@
+// 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_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class PortfolioCardHeader extends StatelessWidget {
+  const PortfolioCardHeader({
+    this.logo,
+    this.padding,
+    this.radius,
+    this.projectName,
+    this.subtitle,
+    this.keyword,
+    super.key,
+  });
+
+  final Widget? logo;
+  final double? padding;
+  final double? radius;
+  final TextWrapper? projectName;
+  final TextWrapper? subtitle;
+  final List<TextWrapper>? keyword;
+
+  @override
+  Widget build(BuildContext context) => Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              if (logo != null) logo!,
+              const Gap(10),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  if (projectName != null)
+                    Text(
+                      projectName!.text,
+                      style:
+                          projectName!.style ?? context.textTheme.titleMedium,
+                    ).toGradient(
+                      LinearGradientHelper.fromNullableColors(
+                        projectName!.gradient,
+                      ),
+                    ),
+                  if (subtitle != null) ...[
+                    const Gap(5),
+                    Text(
+                      subtitle!.text,
+                      style: subtitle!.style ?? context.textTheme.titleSmall,
+                    ).toGradient(
+                      LinearGradientHelper.fromNullableColors(
+                        subtitle!.gradient,
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ],
+          ),
+          const Gap(10),
+          Wrap(
+            children: [
+              if (keyword != null)
+                ...keyword!.map(
+                  (e) => Container(
+                    margin: const EdgeInsets.all(3),
+                    padding: const EdgeInsets.all(6),
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).focusColor,
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    child: Text(
+                      e.text,
+                      style: e.style ?? context.textTheme.bodySmall,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ],
+      );
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_images.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_images.dart
@ -0,0 +1,57 @@
+// 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';
+
+class PortfolioCardImages extends StatelessWidget {
+  const PortfolioCardImages({
+    this.images,
+    this.radius,
+    this.maxSize,
+    super.key,
+  });
+
+  final List<Widget>? images;
+  final double? radius;
+  final Size? maxSize;
+
+  @override
+  Widget build(BuildContext context) {
+    final result = <Widget>[];
+    for (final image in images ?? List<Widget>.empty()) {
+      result.addAll([
+        Expanded(
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(radius ?? 0),
+            child: Container(
+              constraints: BoxConstraints(
+                maxHeight: maxSize != null ? maxSize!.width : 100,
+              ),
+              child: image,
+            ),
+          ),
+        ),
+        const Gap(25),
+      ]);
+    }
+    result.removeLast();
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: result,
+    );
+  }
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart
@ -0,0 +1,127 @@
+// 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_component_copy_with_extension/component_copy_with_extension.dart';
+
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
+import 'package:wyatt_ui_kit/src/core/helpers/helpers.dart';
+part 'quote_card.g.dart';
+
+@ComponentCopyWithExtension()
+class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
+  const QuoteCard({
+    super.avatar,
+    super.name,
+    super.subtitle,
+    super.gradient,
+    super.quote,
+    super.leftQuote,
+    super.rightQuote,
+    super.radius,
+    super.padding,
+    super.borderColors,
+    super.backgroundColor,
+    super.minSize,
+    super.maxSize,
+    super.shadow,
+    super.background,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => CardWrapper(
+        background: background,
+        padding: padding,
+        backgroundColor: backgroundColor,
+        borderColors: borderColors,
+        shadow: shadow,
+        maxSize: maxSize,
+        minSize: minSize,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            leftQuote ??
+                Align(
+                  alignment: Alignment.topLeft,
+                  child: GradientText(
+                    '“',
+                    gradient: gradient,
+                    style: context.textTheme.titleLarge
+                        ?.copyWith(fontWeight: FontWeight.bold),
+                  ),
+                ),
+            if (quote != null) ...[
+              Text(
+                quote!.text,
+                style: quote!.style ??
+                    context.textTheme.bodyMedium
+                        ?.copyWith(fontStyle: FontStyle.italic),
+              ).toGradient(
+                LinearGradientHelper.fromNullableColors(
+                  quote!.gradient,
+                ),
+              )
+            ],
+            const Gap(15),
+            rightQuote ??
+                Align(
+                  alignment: Alignment.bottomRight,
+                  child: GradientText(
+                    '”',
+                    gradient: gradient,
+                    style: context.textTheme.titleLarge
+                        ?.copyWith(fontWeight: FontWeight.bold),
+                  ),
+                ),
+            Row(
+              children: [
+                if (avatar != null) ...[
+                  avatar!,
+                  const Gap(25),
+                ],
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (name != null) ...[
+                      Text(
+                        name!.text,
+                        style: name!.style ?? context.textTheme.titleMedium,
+                      ).toGradient(
+                        LinearGradientHelper.fromNullableColors(
+                          name!.gradient,
+                        ),
+                      ),
+                    ],
+                    if (subtitle != null) ...[
+                      const Gap(5),
+                      Text(
+                        subtitle!.text,
+                        style: subtitle!.style ?? context.textTheme.titleMedium,
+                      ).toGradient(gradient),
+                    ],
+                  ],
+                )
+              ],
+            ),
+          ],
+        ),
+      );
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.g.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.g.dart
@ -0,0 +1,88 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'quote_card.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $QuoteCardCWProxyImpl implements $QuoteCardComponentCWProxy {
+  const $QuoteCardCWProxyImpl(this._value);
+  final QuoteCard _value;
+  @override
+  QuoteCard avatar(Widget? avatar) => this(avatar: avatar);
+  @override
+  QuoteCard name(TextWrapper? name) => this(name: name);
+  @override
+  QuoteCard subtitle(TextWrapper? subtitle) => this(subtitle: subtitle);
+  @override
+  QuoteCard gradient(Gradient? gradient) => this(gradient: gradient);
+  @override
+  QuoteCard quote(TextWrapper? quote) => this(quote: quote);
+  @override
+  QuoteCard leftQuote(Widget? leftQuote) => this(leftQuote: leftQuote);
+  @override
+  QuoteCard rightQuote(Widget? rightQuote) => this(rightQuote: rightQuote);
+  @override
+  QuoteCard radius(double? radius) => this(radius: radius);
+  @override
+  QuoteCard padding(double? padding) => this(padding: padding);
+  @override
+  QuoteCard borderColors(List<Color>? borderColors) =>
+      this(borderColors: borderColors);
+  @override
+  QuoteCard backgroundColor(Color? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  QuoteCard minSize(Size? minSize) => this(minSize: minSize);
+  @override
+  QuoteCard maxSize(Size? maxSize) => this(maxSize: maxSize);
+  @override
+  QuoteCard shadow(BoxShadow? shadow) => this(shadow: shadow);
+  @override
+  QuoteCard background(Widget? background) => this(background: background);
+  @override
+  QuoteCard key(Key? key) => this(key: key);
+  @override
+  QuoteCard call({
+    Widget? avatar,
+    TextWrapper? name,
+    TextWrapper? subtitle,
+    Gradient? gradient,
+    TextWrapper? quote,
+    Widget? leftQuote,
+    Widget? rightQuote,
+    double? radius,
+    double? padding,
+    List<Color>? borderColors,
+    Color? backgroundColor,
+    Size? minSize,
+    Size? maxSize,
+    BoxShadow? shadow,
+    Widget? background,
+    Key? key,
+  }) =>
+      QuoteCard(
+        avatar: avatar ?? _value.avatar,
+        name: name ?? _value.name,
+        subtitle: subtitle ?? _value.subtitle,
+        gradient: gradient ?? _value.gradient,
+        quote: quote ?? _value.quote,
+        leftQuote: leftQuote ?? _value.leftQuote,
+        rightQuote: rightQuote ?? _value.rightQuote,
+        radius: radius ?? _value.radius,
+        padding: padding ?? _value.padding,
+        borderColors: borderColors ?? _value.borderColors,
+        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        minSize: minSize ?? _value.minSize,
+        maxSize: maxSize ?? _value.maxSize,
+        shadow: shadow ?? _value.shadow,
+        background: background ?? _value.background,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $QuoteCardCWMixin on Component {
+  $QuoteCardComponentCWProxy get copyWith =>
+      $QuoteCardCWProxyImpl(this as QuoteCard);
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart
@ -0,0 +1,85 @@
+// 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_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/cards/skill_card/widgets/skill_card_header.dart';
+import 'package:wyatt_ui_kit/src/components/cards/skill_card/widgets/skill_card_skills.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/src/core/extensions/extensions.dart';
+import 'package:wyatt_ui_kit/src/core/helpers/helpers.dart';
+part 'skill_card.g.dart';
+
+@ComponentCopyWithExtension()
+class SkillCard extends SkillCardComponent with $SkillCardCWMixin {
+  const SkillCard({
+    super.icon,
+    super.gradient,
+    super.title,
+    super.description,
+    super.skills,
+    super.leadingIcon,
+    super.radius,
+    super.padding,
+    super.borderColors,
+    super.backgroundColor,
+    super.minSize,
+    super.maxSize = const Size(330, double.infinity),
+    super.shadow,
+    super.background,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => CardWrapper(
+        background: background,
+        padding: padding,
+        backgroundColor: backgroundColor,
+        borderColors: borderColors,
+        shadow: shadow,
+        maxSize: maxSize,
+        minSize: minSize,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            SkillCardHeader(
+              icon: icon,
+              title: title,
+              gradient: gradient,
+            ),
+            const Gap(25),
+            if (description != null) ...[
+              Text(
+                description!.text,
+                style: description!.style ?? context.textTheme.bodyMedium,
+              ).toGradient(
+                LinearGradientHelper.fromNullableColors(description!.gradient),
+              ),
+              const Gap(25),
+            ],
+            if (skills != null)
+              SkillCardSkills(
+                gradient: gradient,
+                skills: skills,
+                leadingIcon: leadingIcon,
+              ),
+          ],
+        ),
+      );
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.g.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.g.dart
@ -0,0 +1,86 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'skill_card.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
+  const $SkillCardCWProxyImpl(this._value);
+  final SkillCard _value;
+  @override
+  SkillCard icon(IconData? icon) => this(icon: icon);
+  @override
+  SkillCard gradient(List<Color>? gradient) => this(gradient: gradient);
+  @override
+  SkillCard title(TextWrapper? title) => this(title: title);
+  @override
+  SkillCard description(TextWrapper? description) =>
+      this(description: description);
+  @override
+  SkillCard skills(List<TextWrapper>? skills) => this(skills: skills);
+  @override
+  SkillCard leadingIcon(IconData? leadingIcon) =>
+      this(leadingIcon: leadingIcon);
+  @override
+  SkillCard radius(double? radius) => this(radius: radius);
+  @override
+  SkillCard padding(double? padding) => this(padding: padding);
+  @override
+  SkillCard borderColors(List<Color>? borderColors) =>
+      this(borderColors: borderColors);
+  @override
+  SkillCard backgroundColor(Color? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  SkillCard minSize(Size? minSize) => this(minSize: minSize);
+  @override
+  SkillCard maxSize(Size? maxSize) => this(maxSize: maxSize);
+  @override
+  SkillCard shadow(BoxShadow? shadow) => this(shadow: shadow);
+  @override
+  SkillCard background(Widget? background) => this(background: background);
+  @override
+  SkillCard key(Key? key) => this(key: key);
+  @override
+  SkillCard call({
+    IconData? icon,
+    List<Color>? gradient,
+    TextWrapper? title,
+    TextWrapper? description,
+    List<TextWrapper>? skills,
+    IconData? leadingIcon,
+    double? radius,
+    double? padding,
+    List<Color>? borderColors,
+    Color? backgroundColor,
+    Size? minSize,
+    Size? maxSize,
+    BoxShadow? shadow,
+    Widget? background,
+    Key? key,
+  }) =>
+      SkillCard(
+        icon: icon ?? _value.icon,
+        gradient: gradient ?? _value.gradient,
+        title: title ?? _value.title,
+        description: description ?? _value.description,
+        skills: skills ?? _value.skills,
+        leadingIcon: leadingIcon ?? _value.leadingIcon,
+        radius: radius ?? _value.radius,
+        padding: padding ?? _value.padding,
+        borderColors: borderColors ?? _value.borderColors,
+        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        minSize: minSize ?? _value.minSize,
+        maxSize: maxSize ?? _value.maxSize,
+        shadow: shadow ?? _value.shadow,
+        background: background ?? _value.background,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $SkillCardCWMixin on Component {
+  $SkillCardComponentCWProxy get copyWith =>
+      $SkillCardCWProxyImpl(this as SkillCard);
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart
@ -0,0 +1,65 @@
+// 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_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_icon.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/src/core/extensions/extensions.dart';
+import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+
+class SkillCardHeader extends StatelessWidget {
+  const SkillCardHeader({super.key, this.icon, this.title, this.gradient});
+
+  final IconData? icon;
+  final TextWrapper? title;
+  final List<Color>? gradient;
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          if (icon != null) ...[
+            if (gradient != null)
+              GradientIcon(
+                icon,
+                size: 60,
+                gradient: LinearGradient(colors: gradient!),
+              )
+            else
+              Icon(
+                icon,
+                size: 60,
+              ),
+            const Gap(25),
+            Column(
+              children: [
+                if (title != null) ...[
+                  Text(
+                    title!.text,
+                    style: title!.style ?? context.textTheme.titleLarge,
+                  ).toGradient(
+                    LinearGradientHelper.fromNullableColors(
+                      title!.gradient,
+                    ),
+                  ),
+                ],
+              ],
+            )
+          ],
+        ],
+      );
+}
--- a/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart
@ -0,0 +1,62 @@
+// 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_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_icon.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
+import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+
+class SkillCardSkills extends StatelessWidget {
+  const SkillCardSkills({
+    super.key,
+    this.skills,
+    this.leadingIcon,
+    this.gradient,
+  });
+
+  final List<TextWrapper>? skills;
+  final IconData? leadingIcon;
+  final List<Color>? gradient;
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: skills!
+            .map(
+              (e) => Row(
+                children: [
+                  Icon(
+                    leadingIcon ?? Icons.check,
+                  ).toGradient(
+                    LinearGradientHelper.fromNullableColors(gradient),
+                  ),
+                  const Gap(10),
+                  Expanded(
+                    child: Text(
+                      e.text,
+                      style: e.style ?? context.textTheme.bodyMedium,
+                    ).toGradient(
+                      LinearGradientHelper.fromNullableColors(e.gradient),
+                    ),
+                  ),
+                ],
+              ),
+            )
+            .toList(),
+      );
+}