@4alldigital/foundation-ui--core 3.0.0

package/src/templates/FAQScreen/FAQScreen.stories.tsx

@@ -0,0 +1,278 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import FAQScreen from '.';
+import { formatFaqs } from '@techstuff-dev/foundation-api-utils';
+
+const meta: Meta<typeof FAQScreen> = {
+  title: 'TEMPLATES/FAQScreen',
+  component: FAQScreen,
+};
+
+type Story = StoryObj<typeof FAQScreen>;
+
+const ESFAQS = [
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/354:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'Video On Demand Classes have been pre-recorded, whereas Live Streamed classes are real-time classes live streamed straight to you.',
+      ],
+      created: [1619874383],
+      title: ['How are videos on-demand different from live streamed classes?'],
+      updated: [1684101872],
+      uuid: ['c63e11dc-c4c7-444f-97a7-bbedf6afce26'],
+    },
+    sort: [1684101872000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/355:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'Not at all! Our NRG barrebody classes are low impact, and safe for all fitness levels. Simply listen to your body and go for it.',
+      ],
+      created: [1619874477],
+      title: ['Do I need any ballet or Pilates experience to join the classes?'],
+      updated: [1641655486],
+      uuid: ['444571a9-a3fd-4e7d-aae5-92ed18130e8f'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/357:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'Comfortable clothing. A low impact sports bra should provide adequate support as all our classes are low-impact. We recommend you stay barefoot or wear grippy socks. Some classes such as dance cardio and cardio can be done wearing trainers of you wish.',
+      ],
+      created: [1619874677],
+      title: ['What shall I wear?'],
+      updated: [1641655486],
+      uuid: ['806da26b-7406-43d2-8459-5474073e7aec'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/360:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: ['You need to subscribed to the app and you are ready to go. Just pick your class and get started.'],
+      created: [1619874835],
+      title: ['How do I get access to on-demand barre classes on the platform?'],
+      updated: [1641655486],
+      uuid: ['987c5322-984e-44b8-88e1-b4e80dd88e0c'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/361:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: ['The videos on our platform allow you to pick to play the class with or without music.'],
+      created: [1619874869],
+      title: ['What about music?'],
+      updated: [1641655486],
+      uuid: ['9421bd0c-b255-4cca-a9c2-b8692bd0a505'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/358:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'The length of our On Demand workouts range from 5 minutes to a full hour. The most popular format is the 30mn blast session.',
+      ],
+      created: [1619874764],
+      title: ['How long are the classes?'],
+      updated: [1641655486],
+      uuid: ['8436eb10-a5a6-4f5e-a07f-281e9ea77bce'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/356:en',
+    _score: null,
+    _ignored: ['answer.keyword'],
+    _source: {
+      _language: 'en',
+      answer: [
+        'All our classes can be done without any equipment at all, although some of the workouts will be more beneficial with props, but you will need: - Mat / carpeted floor - Barre / chair / table / wall Depending on the class you wish to follow, it will say which of the followings you need: - Pilates ball - Resistance loop band / theraband - set of small weights - yoga block',
+      ],
+      created: [1619874505],
+      title: ['Do I need any equipment?'],
+      updated: [1641655486],
+      uuid: ['6c3023f7-7281-46e9-9801-77eb7c1ac282'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/359:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'The live streamed class is PS4.85 per class, the subscription to the on-demand platform is PS4.50 per month.',
+      ],
+      created: [1619874798],
+      title: ['What is the cost of the live streamed class / on-demand subscription?'],
+      updated: [1641655486],
+      uuid: ['73de1ff1-5ef0-4c66-99aa-d983101e512c'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/354:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'Video On Demand Classes have been pre-recorded, whereas Live Streamed classes are real-time classes live streamed straight to you.',
+      ],
+      created: [1619874383],
+      title: ['How are videos on-demand different from live streamed classes?'],
+      updated: [1684101872],
+      uuid: ['c63e11dc-c4c7-444f-97a7-bbedf6afce26'],
+    },
+    sort: [1684101872000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/355:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'Not at all! Our NRG barrebody classes are low impact, and safe for all fitness levels. Simply listen to your body and go for it.',
+      ],
+      created: [1619874477],
+      title: ['Do I need any ballet or Pilates experience to join the classes?'],
+      updated: [1641655486],
+      uuid: ['444571a9-a3fd-4e7d-aae5-92ed18130e8f'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/357:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'Comfortable clothing. A low impact sports bra should provide adequate support as all our classes are low-impact. We recommend you stay barefoot or wear grippy socks. Some classes such as dance cardio and cardio can be done wearing trainers of you wish.',
+      ],
+      created: [1619874677],
+      title: ['What shall I wear?'],
+      updated: [1641655486],
+      uuid: ['806da26b-7406-43d2-8459-5474073e7aec'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/360:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: ['You need to subscribed to the app and you are ready to go. Just pick your class and get started.'],
+      created: [1619874835],
+      title: ['How do I get access to on-demand barre classes on the platform?'],
+      updated: [1641655486],
+      uuid: ['987c5322-984e-44b8-88e1-b4e80dd88e0c'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/361:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: ['The videos on our platform allow you to pick to play the class with or without music.'],
+      created: [1619874869],
+      title: ['What about music?'],
+      updated: [1641655486],
+      uuid: ['9421bd0c-b255-4cca-a9c2-b8692bd0a505'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/358:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'The length of our On Demand workouts range from 5 minutes to a full hour. The most popular format is the 30mn blast session.',
+      ],
+      created: [1619874764],
+      title: ['How long are the classes?'],
+      updated: [1641655486],
+      uuid: ['8436eb10-a5a6-4f5e-a07f-281e9ea77bce'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/356:en',
+    _score: null,
+    _ignored: ['answer.keyword'],
+    _source: {
+      _language: 'en',
+      answer: [
+        'All our classes can be done without any equipment at all, although some of the workouts will be more beneficial with props, but you will need: - Mat / carpeted floor - Barre / chair / table / wall Depending on the class you wish to follow, it will say which of the followings you need: - Pilates ball - Resistance loop band / theraband - set of small weights - yoga block',
+      ],
+      created: [1619874505],
+      title: ['Do I need any equipment?'],
+      updated: [1641655486],
+      uuid: ['6c3023f7-7281-46e9-9801-77eb7c1ac282'],
+    },
+    sort: [1641655486000],
+  },
+  {
+    _index: 'elasticsearch_index_nrgprodcms_faqs',
+    _id: 'entity:node/359:en',
+    _score: null,
+    _source: {
+      _language: 'en',
+      answer: [
+        'The live streamed class is PS4.85 per class, the subscription to the on-demand platform is PS4.50 per month.',
+      ],
+      created: [1619874798],
+      title: ['What is the cost of the live streamed class / on-demand subscription?'],
+      updated: [1641655486],
+      uuid: ['73de1ff1-5ef0-4c66-99aa-d983101e512c'],
+    },
+    sort: [1641655486000],
+  },
+];
+
+const formattedFAQS = formatFaqs(ESFAQS);
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Frequently Asked Questions',
+    image: 'https://picsum.photos/600/400',
+    data: formattedFAQS,
+  },
+};
+
+export default meta;

package/src/templates/FAQScreen/FAQScreen.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './FAQScreen.types';
+import DisplayHeading from '../../components/DisplayHeading';
+import Loader from '../../components/Loader';
+import Accordion from '../../components/Accordion';
+
+const FAQScreen = ({ testID, title, image, data, isLoading }: Props) => {
+  return (
+    <Screen data-testid={testID || 'FAQScreen'} image={image}>
+      {title && <DisplayHeading text={title} />}
+      {!data && isLoading && (
+        <div className="flex flex-1 min-h-[125px] items-center justify-center">
+          <Loader />
+        </div>
+      )}
+      {data && (
+        <Accordion
+          data={data?.map(item => ({
+            title: item.title || '',
+            content: item.answer || '',
+          }))}
+        />
+      )}
+    </Screen>
+  );
+};
+
+FAQScreen.displayName = 'FAQScreen';
+
+export default FAQScreen;
+export type { Props };

package/src/templates/FAQScreen/FAQScreen.types.ts

@@ -0,0 +1,14 @@
+export interface Props {
+  testID?: string;
+  title: string;
+  image?: string;
+  data?: {
+    uuid?: string;
+    id?: string;
+    title?: string;
+    answer?: string;
+    created?: number;
+    updated?: number;
+  }[];
+  isLoading?: boolean;
+}

package/src/templates/FAQScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './FAQScreen';

package/src/templates/HomeScreen/HomeScreen.stories.tsx

@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import HomeScreen from '.';
+import { isMobileOnly } from 'react-device-detect';
+import { BTN_SIZES, BTN_VARIANTS, CardVariant, COPY_ALIGN, VideoProps } from '../../components';
+import { SPACING } from '../../components/Hero/Hero.types';
+import { Easing } from 'framer-motion';
+
+const meta: Meta<typeof HomeScreen> = {
+  title: 'TEMPLATES/HomeScreen',
+  component: HomeScreen,
+};
+
+type Story = StoryObj<typeof HomeScreen>;
+
+const panelVideoProps = {
+  title: 'Elegant workouts, real results',
+  description: 'Achieve the elegance of a ballerina and the strength of an athlete with NRG at home.',
+  videoProps: {
+    sources: [
+      {
+        src: isMobileOnly ? '/assets/SquareMobileVideo.mov' : '/assets/BannerVideo.mov',
+        type: 'video/mp4',
+      },
+    ],
+    options: {
+      aspectRatio: undefined,
+    },
+    aspectRatioValue: isMobileOnly ? '1/1' : ('16/9' as VideoProps['aspectRatioValue']),
+  },
+};
+
+const panelFeatureProps = {
+  title: 'Barre at home',
+  description:
+    'NRG at home is a barre platform that will help you get in shape and stay healthy. Our workouts are designed to be fun and effective.',
+  assets: {
+    bgAsset: {
+      src: '/assets/circle-tertiary.png',
+      alt: 'splash-1',
+    },
+    focalAsset1: {
+      src: '/assets/iphone-angled-1.png',
+      alt: 'phone-2',
+    },
+    focalAsset2: {
+      src: '/assets/iphone-flat-2.png',
+      alt: 'phone-1',
+    },
+    focalAsset3: {
+      src: '/assets/supported-panel.png',
+      alt: 'brand-1',
+    },
+  },
+  buttonData: {
+    children: 'Get Started',
+    variant: BTN_VARIANTS.PRIMARY,
+    size: BTN_SIZES.LARGE,
+    onClick: () => (window.location.href = 'https://www.bbc.com'),
+  },
+};
+
+const panelCardsProps = {
+  title: 'Why choose us?',
+  description:
+    'unlimited access to expertly crafted barre workouts, personalized live classes, and a vibrant community—all available at your fingertips with our seamless mobile apps.',
+  cardData: [
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '1',
+        icon: 'mdi:heart-cog',
+        title: 'On-Demand Classes',
+        moreTitle: 'Learn more',
+        description:
+          'Explore our on-demand catalog with 500+ barre workouts, anytime, anywhere—your personalized fitness journey starts here.',
+      },
+    },
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '2',
+        icon: 'mdi:account-group',
+        title: 'Live Sessions',
+        moreTitle: 'Learn more',
+        description:
+          'Join 25+ live barre sessions monthly—experience real-time coaching and connect with our vibrant community.',
+      },
+    },
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '3',
+        icon: 'mdi:yoga',
+        title: 'All-in-one barre platform',
+        moreTitle: 'Learn more',
+        description:
+          'Experience a holistic fitness journey with seamless web and mobile apps, delivering workouts tailored for your convenience.',
+      },
+    },
+  ],
+  spacing: isMobileOnly ? SPACING.ATOM : SPACING.ELEMENT,
+};
+
+const panelSubscriptionsProps = {
+  title: 'Choose Your Perfect Plan',
+  description:
+    'Select from our flexible subscription options to find the plan that best fits your fitness goals and lifestyle (7-day free trail & pause anytime).',
+  cardData: [
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '1',
+        icon: 'mdi:rotate-360',
+        title: 'Premium (Monthly)',
+        subtitle: '£4.50',
+        align: COPY_ALIGN.CENTER,
+        description: 'Unlimited Catalogue Access',
+      },
+    },
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '2',
+        icon: 'mdi:camera-flip',
+        title: 'Premium+ (Monthly)',
+        subtitle: '£19.50',
+        align: COPY_ALIGN.CENTER,
+        description: 'Unlimited On-Demand and Live',
+      },
+    },
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '3',
+        icon: 'mdi:calendar-refresh-outline',
+        title: 'Premium (Annual)',
+        subtitle: '£49.50',
+        align: COPY_ALIGN.CENTER,
+        description: 'Unlimited Catalogue Access',
+      },
+    },
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '3',
+        icon: 'mdi:yoga',
+        title: 'Premium+ (Annual)',
+        subtitle: '£214.50',
+        align: COPY_ALIGN.CENTER,
+        description: 'Unlimited On-Demand and Live',
+      },
+    },
+  ],
+  spacing: isMobileOnly ? SPACING.ATOM : SPACING.ELEMENT,
+};
+
+const panelTestimonialsProps = {
+  title: 'What you think',
+  description:
+    'Don’t just take our word for it—here’s what our community has to say about their transformative experiences with us',
+  cardData: [
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '1',
+        icon: 'mdi:account-outline',
+        align: COPY_ALIGN.CENTER,
+        title: 'Elsa',
+        description:
+          "Nathalie's classes are incredible. The application allows you to choose targeted classes and always very varied depending on the shape of the moment. We are perfectly guided for the realization of the movements, Nathalie transmits a great energy. Following her classes live or in replay is a real pleasure that I can no longer do without!!",
+      },
+    },
+    {
+      variant: CardVariant.ICON,
+      data: {
+        id: '2',
+        icon: 'mdi:account',
+        align: COPY_ALIGN.CENTER,
+        title: 'Katharine',
+        description:
+          "This has completely changed and has been a game changer for my running, I'm stronger and faster. I've never looked so toned and the barre classes are a really good way to get in the strength training that I need at my age (53 next week!)",
+      },
+    },
+  ],
+  spacing: isMobileOnly ? SPACING.ATOM : SPACING.ELEMENT,
+};
+
+const panelHerosProps = [
+  {
+    title: 'Access the LIVE CLASSES',
+    description:
+      '<p>Join the LIVE CLASSES daily and access their recordings. Check the schedule of Live Classes. 25 classes per month, Monday-Saturday.</p>',
+    image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2022-03/day5.jpg?itok=EbeIXNcD',
+    inversed: false,
+  },
+  {
+    title: 'Short on time?',
+    description:
+      '<p>When 10 minutes is all you have!</p><p>Check you these series of short workouts. Take your pick between some quick full body workouts or some more focused sessions.</p>',
+    image:
+      'https://assets.nrgbarrebody.app/styles/full_16_9/s3/2023-08/Screenshot%202023-08-29%20at%2016.14.29.png?itok=qjfeucKp',
+    inversed: true,
+  },
+];
+
+const panelDataCardsProps = {
+  withSeparators: !isMobileOnly,
+  spacing: isMobileOnly ? SPACING.DEFAULT : SPACING.ELEMENT,
+  cardData: [
+    {
+      variant: CardVariant.DATA,
+      data: {
+        id: '1',
+        data: {
+          item: '1000s',
+          label: 'Thriving community barre enthusiasts',
+          numberData: {
+            from: 0,
+            to: 10,
+            animationOptions: {
+              ease: 'easeInOut' as Easing | Easing[],
+            },
+          },
+        },
+        raised: false,
+        padded: true,
+      },
+    },
+    {
+      variant: CardVariant.DATA,
+      data: {
+        id: '2',
+        data: {
+          item: '+',
+          label: 'On-demand workouts',
+          numberData: {
+            from: 0,
+            to: 500,
+            animationOptions: {
+              ease: 'easeInOut' as Easing | Easing[],
+            },
+          },
+          animateNumber: true,
+        },
+        raised: false,
+        padded: true,
+      },
+    },
+    {
+      variant: CardVariant.DATA,
+      data: {
+        id: '3',
+        data: {
+          item: '+',
+          label: 'Live sessions per month',
+          numberData: {
+            from: 0,
+            to: 25,
+            animationOptions: {
+              ease: 'easeInOut' as Easing | Easing[],
+            },
+          },
+          animateNumber: true,
+        },
+        raised: false,
+        padded: true,
+      },
+    },
+  ],
+};
+
+const panelProductProps = {
+  image1: '/assets/iphone-flat-1.png',
+  image2: '/assets/iphone-flat-2.png',
+  title: 'Grace meets strength with NRG at home.',
+  description:
+    "Unlock the benefits of ballet barre training with our convenient subscription app. Featuring classes led by professional dancers, our app offers an engaging way to tone your muscles, enhance your flexibility, and boost your overall fitness. Whether you're looking to try something new or deepen your practice, our app provides the tools you need. Start your free trial now!",
+  iosLink: 'https://apps.apple.com/us/app/nrg-at-home/id1561480000',
+  androidLink: 'https://play.google.com/store/apps/details?id=com.nrgathome',
+  spacing: isMobileOnly ? SPACING.DEFAULT : SPACING.MODULE,
+};
+
+const panelIntroProps = {
+  title: 'The "Barre Outside" Series',
+  withBg: true,
+  description:
+    "<p>You want to start working out! You wish to increase muscle strength, improve mobility and posture but you are very busy, you work all day and don't really know how or where to start. In this section I recommend 5 workouts that you can start with and try your best to complete within the space of a week ( 7 days). You will find yourself getting stronger, more toned with increasingly more energy too.</p>",
+  buttonData: {
+    variant: BTN_VARIANTS.PRIMARY,
+    size: BTN_SIZES.LARGE,
+    children: 'New Classes',
+  },
+  image:
+    'https://assets.nrgbarrebody.app/styles/full_16_9/s3/2024-05/WhatsApp%20Image%202024-05-05%20at%2012.26.48.jpeg?itok=oxJt0m9N',
+};
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Home Screen',
+    panelIntroProps: panelIntroProps,
+    panelVideoProps: panelVideoProps,
+    panelFeatureProps: panelFeatureProps,
+    panelCardsProps: panelCardsProps,
+    panelHerosProps: panelHerosProps,
+    panelSubscriptionsProps: panelSubscriptionsProps,
+    panelTestimonialsProps: panelTestimonialsProps,
+    panelDataCardsProps: panelDataCardsProps,
+    panelProductProps: panelProductProps,
+  },
+};
+
+export default meta;

package/src/templates/HomeScreen/HomeScreen.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './HomeScreen.types';
+import Container from '../../components/Container';
+import PanelCards from '../../components/PanelCards';
+import PanelCustom from '../../components/PanelCustom';
+import PanelFeature from '../../components/PanelFeature';
+import PanelHero from '../../components/PanelHero';
+import PanelIntro from '../../components/PanelIntro';
+import PanelProduct from '../../components/PanelProduct';
+import PanelVideo from '../../components/PanelVideo';
+
+const HomeScreen = ({
+  testID,
+  image,
+  panelIntroProps,
+  panelVideoProps,
+  panelFeatureProps,
+  panelCardsProps,
+  panelHerosProps,
+  panelSubscriptionsProps,
+  panelTestimonialsProps,
+  panelDataCardsProps,
+  panelProductProps,
+  panelCustomProps,
+  isFlush = true,
+}: Props) => {
+  return (
+    <Screen data-testid={testID || 'HomeScreen'} image={image} isFlush={isFlush}>
+      {panelVideoProps && <PanelVideo {...panelVideoProps} />}
+      <Container>
+        {panelIntroProps && <PanelIntro {...panelIntroProps} />}
+        {panelFeatureProps && <PanelFeature {...panelFeatureProps} />}
+        {panelCardsProps && <PanelCards {...panelCardsProps} />}
+        {panelHerosProps?.[0] && <PanelHero {...panelHerosProps?.[0]} />}
+        {panelSubscriptionsProps && <PanelCards {...panelSubscriptionsProps} />}
+        {panelTestimonialsProps && <PanelCards {...panelTestimonialsProps} />}
+        {panelHerosProps?.slice(1).map(panelHeroProps => <PanelHero key={panelHeroProps.title} {...panelHeroProps} />)}
+        {panelDataCardsProps && <PanelCards {...panelDataCardsProps} />}
+        {panelProductProps && <PanelProduct {...panelProductProps} />}
+        {panelCustomProps && <PanelCustom {...panelCustomProps} />}
+      </Container>
+    </Screen>
+  );
+};
+
+HomeScreen.displayName = 'HomeScreen';
+
+export default HomeScreen;
+export type { Props };