@4alldigital/foundation-ui--core 3.0.0

package/src/components/PanelFeature/PanelFeature.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './PanelFeature.types';
+import AnimationSet1 from '../AnimationSet1';
+import DisplayHeading from '../DisplayHeading';
+import Copy from '../Copy';
+import Button from '../Button';
+import Chip from '../Chip';
+import Container from '../Container';
+import { SPACING } from '../Hero/Hero.types';
+import { ChipVariant } from '../Chip/Chip.types';
+
+const PanelFeature = ({
+  testID,
+  title,
+  description,
+  inversed,
+  assets,
+  buttonData,
+  withBg = true,
+  spacing = SPACING.DEFAULT,
+  chips,
+}: Props) => {
+  return (
+    <div
+      data-testid={testID || 'PanelFeature'}
+      className={cx('relative m-auto w-full flex flex-none flex-nowrap px-4 lg:px-0', spacing)}>
+      {withBg && (
+        <div className="rounded-full blur-[250px] flex flex-none aspect-square absolute -top-24 -left-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-700 to-primary-300" />
+      )}
+      <Container>
+        <div
+          className={cx(
+            'relative flex flex-col-reverse sm:flex-col md:flex-row lg:flex-row flex-nowrap w-full h-min justify-between overflow-visible p-0 md:items-center gap-16',
+            {
+              'flex-row-reverse': inversed,
+            },
+          )}>
+          <div className="w-full md:w-1/2 w-1/2 flex flex-col items-start justify-center gap-8">
+            <div className="relative text-center md:text-left">
+              <DisplayHeading text={title} flush />
+            </div>
+            <div className="relative text-center md:text-left">
+              <Copy className="mb-0">{description}</Copy>
+            </div>
+            {chips && (
+              <div className="grid grid-cols-3 gap-2 mx-auto md:mx-0">
+                {chips?.map((chip, index) => (
+                  <Chip
+                    key={`chip-${index}`}
+                    rounded
+                    iconFirst
+                    text={chip.text}
+                    icon={chip.icon}
+                    variant={chip.variant as ChipVariant}
+                  />
+                ))}
+              </div>
+            )}
+            <div className="mx-auto md:m-0">
+              <Button {...buttonData} />
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 flex items-center justify-center">
+            <div className="w-full aspect-[1/1] flex items-center justify-center">
+              <AnimationSet1
+                bgAsset={assets.bgAsset}
+                focalAsset1={assets.focalAsset1}
+                focalAsset2={assets.focalAsset2}
+                focalAsset3={assets.focalAsset3}
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+PanelFeature.displayName = 'PanelFeature';
+
+export default PanelFeature;
+export type { Props };

package/src/components/PanelFeature/PanelFeature.types.ts

@@ -0,0 +1,27 @@
+import { Props as ButtonProps } from '../Button/Button.types';
+
+import { Asset } from '../AnimationSet1/AnimationSet1.types';
+import { SPACING } from '../Hero/Hero.types';
+
+export interface Props {
+  testID?: string;
+  inversed?: boolean;
+  title: string;
+  description: string;
+  meta?: any[];
+  buttonData: ButtonProps;
+  assets: {
+    bgAsset?: Asset;
+    focalAsset1?: Asset;
+    focalAsset2?: Asset;
+    focalAsset3?: Asset;
+  };
+  withBg?: boolean;
+  spacing?: SPACING;
+  chips?: {
+    text: string;
+    icon?: string;
+    iconFirst?: boolean;
+    variant?: string
+  }[];
+}

package/src/components/PanelFeature/index.ts

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

package/src/components/PanelHero/PanelHero.stories.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelHero from '.';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Copy from '../Copy';
+import Icon from '../Icon';
+
+const meta: Meta<typeof PanelHero> = {
+  title: 'ORGANISMS/PanelHero',
+  component: PanelHero,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof PanelHero>;
+
+export const Default: Story = {
+  args: {
+    withBg: true,
+    title: 'The "Barre Outside" Series',
+    contentComponent: (
+      <Copy className="flex flex-row gap-2 items-center justify-end">
+        Test Component <Icon name="mdi:home" />
+      </Copy>
+    ),
+    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 Video: Story = {
+  args: {
+    title: 'The "Barre Outside" Series',
+    description:
+      "A series of pocket size workouts you can do outdoors in your local park,  in your garden, by the pool or on the beach. Let's stay strong and enjoy the fresh air together.",
+    buttonData: {
+      variant: BTN_VARIANTS.PRIMARY,
+      size: BTN_SIZES.LARGE,
+      children: 'New Classes',
+    },
+    video: {
+      sources: [
+        {
+          src: 'https://assets.nrgbarrebody.app/2022-01/VideoPanel2%20-%20HD%201080p.mp4.mp4',
+          type: 'video/mp4',
+        },
+      ],
+      aspectRatioValue: '16/9',
+    },
+  },
+};
+
+export const ManyPanels: Story = {
+  args: {
+    title: 'The "Barre Outside" Series',
+    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',
+  },
+  render: () => {
+    const examplePanels = [
+      {
+        title: "The 'Barre Outside' Series",
+        description:
+          "<p>A series of pocket size workouts you can do outdoors in your local park or in your garden. Let's stay strong and enjoy the fresh air together.<br>\n&nbsp;</p>",
+        buttonData: { variant: BTN_VARIANTS.PRIMARY, size: BTN_SIZES.LARGE, children: 'New Classes Added' },
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/_28A3873.jpg?itok=sI_dy3FT',
+        inversed: true,
+      },
+      {
+        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>',
+        buttonData: { variant: BTN_VARIANTS.PRIMARY, size: BTN_SIZES.LARGE, children: 'Schedule ' },
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2022-03/day5.jpg?itok=EbeIXNcD',
+        inversed: false,
+      },
+      {
+        title: 'Catalogue',
+        description: '<p>Access the barre workouts catalogue.</p>',
+        buttonData: { variant: BTN_VARIANTS.PRIMARY, size: BTN_SIZES.LARGE, children: 'Catalogue' },
+        inversed: true,
+      },
+      {
+        title: '10mn Daily Workouts',
+        description: '<p>When 10 minutes is all you have</p>',
+        buttonData: { variant: BTN_VARIANTS.PRIMARY, size: BTN_SIZES.LARGE, children: 'Get Started' },
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2022-01/Untitled-21_0.jpg?itok=LOmcW1iy',
+        inversed: false,
+      },
+      {
+        title: "The ' Working Girl' Program",
+        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: "Let's do this" },
+        image:
+          'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/202103%20NBP%20-%20NRG%20BarreBody-95.jpg?itok=jpKPlyi3',
+        inversed: true,
+      },
+    ];
+    return (
+      <div>
+        {examplePanels.map((panel, index) => (
+          <PanelHero key={`panel-${index}`} {...panel} headingTag={HEADING_TAGS.H3} />
+        ))}
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/components/PanelHero/PanelHero.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import cx from 'classnames';
+import { Props } from './PanelHero.types';
+import Button from '../Button';
+import DisplayHeading from '../DisplayHeading';
+import Container from '../Container';
+import Image from '../Image';
+import { COPY_ALIGN } from '../Copy/Copy.types';
+import { Transition, motion, useAnimation, useInView } from 'framer-motion';
+import Video from '../Video';
+import HtmlContent from '../HtmlContent';
+import { twMerge } from 'tailwind-merge';
+
+const PanelHero = ({
+  testID,
+  title,
+  contentComponent,
+  description,
+  image,
+  buttonData,
+  inversed = false,
+  withBg = true,
+  spacing,
+  video,
+  headingTag,
+  className,
+}: Props) => {
+  const controls = useAnimation();
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+
+  const defaultAnimation: Transition = {
+    damping: 30,
+    delay: 0,
+    mass: 1.2,
+    stiffness: 200,
+    type: 'spring',
+    duration: 0.5,
+  };
+
+  useEffect(() => {
+    if (isInView) {
+      controls.start(i => ({
+        transform: 'none',
+        transition: { ...defaultAnimation, delay: i * 0.1 },
+      }));
+    }
+  }, [controls, isInView]);
+
+  const aspectRatioClass = useMemo(() => {
+    switch (video?.aspectRatioValue) {
+      case '4/3':
+        return 'aspect-[4/3]';
+      case '1/1':
+        return 'aspect-[1/1]';
+      case '3/4':
+        return 'aspect-[3/4]';
+      case '9/16':
+        return 'aspect-[9/16]';
+      case '16/7':
+        return 'aspect-[16/7]';
+      case '16/5':
+        return 'aspect-[16/5]';
+      default:
+        return 'aspect-[16/9]';
+    }
+  }, [video]);
+
+  const translateX = inversed ? 'translateX(100px)' : 'translateX(-100px)';
+
+  return (
+    <div
+      data-testid={testID || 'PanelHero'}
+      className={twMerge(
+        cx('relative m-auto w-full flex flex-none flex-nowrap py-16 sm:py-24 md:py-32 lg:py-40', spacing, className),
+      )}>
+      {withBg && (
+        <div
+          className={cx(
+            'rounded-full blur-[200px] flex flex-none aspect-square absolute w-[700px] bg-gradient-to-b md:bg-gradient-to-r from-primary-200 to-primary-200 dark:from-primary-800 dark:to-primary-800 z-0',
+            {
+              '-bottom-24 right-0': !inversed,
+              '-top-24 left-0': inversed,
+            },
+          )}
+        />
+      )}
+      <Container>
+        <div
+          className={cx(
+            'relative flex flex-col md:flex-row flex-nowrap w-full h-min justify-between overflow-visible p-0 items-center gap-0 md:gap-16',
+            {
+              'md:flex-row-reverse': inversed,
+            },
+          )}>
+          <div ref={ref} className="w-full md:w-1/2 w-1/2 flex flex-col items-start justify-center z-10">
+            <div
+              className={cx(
+                'relative flex flex-col gap-4 from-body-bg dark:from-body-bg-dark  p-4 rounded',
+                {
+                  'text-right bg-gradient-to-t md:bg-gradient-to-l': !inversed,
+                },
+                {
+                  'text-left bg-gradient-to-t md:bg-gradient-to-r': inversed,
+                },
+              )}>
+              <motion.div
+                initial={{
+                  transform: translateX,
+                }}
+                custom={0}
+                animate={controls}>
+                <DisplayHeading text={title} tag={headingTag} />
+              </motion.div>
+              {contentComponent && (
+                <motion.div
+                  initial={{
+                    transform: translateX,
+                  }}
+                  custom={1}
+                  animate={controls}>
+                  {contentComponent}
+                </motion.div>
+              )}
+              {description && (
+                <motion.div
+                  initial={{
+                    transform: translateX,
+                  }}
+                  custom={1}
+                  animate={controls}>
+                  <HtmlContent
+                    className="mb-0"
+                    align={inversed ? COPY_ALIGN.LEFT : COPY_ALIGN.RIGHT}
+                    data={description}
+                  />
+                </motion.div>
+              )}
+              {buttonData && (
+                <motion.div
+                  initial={{
+                    transform: translateX,
+                  }}
+                  custom={2}
+                  animate={controls}>
+                  <div
+                    className={cx('flex items-center', {
+                      'justify-end': !inversed,
+                      'justify-start': inversed,
+                    })}>
+                    <Button {...buttonData} />
+                  </div>
+                </motion.div>
+              )}
+            </div>
+          </div>
+          <div className="relative w-full md:w-1/2 w-1/2 z-0">
+            <div className={cx('relative md:scale-[1.35] rounded overflow-hidden shadow', aspectRatioClass)}>
+              {image && <Image src={image} alt={title} fill />}
+              {video && (
+                <Video
+                  sources={video.sources}
+                  options={{
+                    autoplay: true,
+                    muted: true,
+                    controls: false,
+                    loop: true,
+                    playsinline: true,
+                  }}
+                  aspectRatioValue={video.aspectRatioValue}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+PanelHero.displayName = 'PanelHero';
+
+export default PanelHero;
+export type { Props };

package/src/components/PanelHero/PanelHero.types.ts

@@ -0,0 +1,19 @@
+import { Props as ButtonProps } from '../Button/Button.types';
+import { Props as VideoProps } from '../Video/Video.types';
+import { SPACING } from '../Hero/Hero.types';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+
+export interface Props {
+  testID?: string;
+  inversed?: boolean;
+  title: string;
+  contentComponent?: React.ReactNode;
+  description?: string;
+  buttonData?: ButtonProps;
+  image?: string;
+  video?: VideoProps;
+  withBg?: boolean;
+  spacing?: SPACING;
+  headingTag?: HEADING_TAGS;
+  className?: string;
+}

package/src/components/PanelHero/index.ts

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

package/src/components/PanelIntro/PanelIntro.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelIntro from '.';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+
+const meta: Meta<typeof PanelIntro> = {
+  title: 'ORGANISMS/PanelIntro',
+  component: PanelIntro,
+};
+
+type Story = StoryObj<typeof PanelIntro>;
+
+export const Default: Story = {
+  args: {
+    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 BgImage: Story = {
+  args: {
+    title: 'The "Barre Outside" Series',
+    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>",
+    bgImage:
+      'https://assets.nrgbarrebody.app/styles/full_16_9/s3/2024-05/WhatsApp%20Image%202024-05-05%20at%2012.26.48.jpeg?itok=oxJt0m9N',
+  },
+};
+
+export default meta;

package/src/components/PanelIntro/PanelIntro.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useRef } from 'react';
+import cx from 'classnames';
+import Button from '../Button';
+import DisplayHeading from '../DisplayHeading';
+import Container from '../Container';
+import Image from '../Image';
+import { COPY_ALIGN } from '../Copy/Copy.types';
+import { Transition, motion, useAnimation, useInView } from 'framer-motion';
+import Video from '../Video';
+import HtmlContent from '../HtmlContent';
+import { twMerge } from 'tailwind-merge';
+import { Props } from './PanelIntro.types';
+
+const PanelIntro = ({
+  testID,
+  title,
+  description,
+  image,
+  buttonData,
+  inversed = false,
+  withBg = true,
+  spacing,
+  video,
+  headingTag,
+  className,
+  bgImage,
+}: Props) => {
+  const controls = useAnimation();
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+
+  const defaultAnimation: Transition = {
+    damping: 30,
+    delay: 0,
+    mass: 1.2,
+    stiffness: 200,
+    type: 'spring',
+    duration: 0.5,
+  };
+
+  useEffect(() => {
+    if (isInView) {
+      controls.start(i => ({
+        transform: 'none',
+        transition: { ...defaultAnimation, delay: i * 0.1 },
+      }));
+    }
+  }, [controls, isInView]);
+
+  const translateY = 'translateY(100px)';
+
+  return (
+    <div
+      data-testid={testID || 'PanelIntro'}
+      className={twMerge(
+        cx('relative m-auto w-full flex flex-none flex-nowrap py-24 sm:py-32 md:py-48 lg:py-56', spacing, className),
+      )}>
+      {withBg && (
+        <div
+          className={cx(
+            'rounded-full blur-[200px] flex flex-none aspect-square absolute w-[700px] opacity-30 bg-gradient-to-b md:bg-gradient-to-r from-primary-700 to-primary-300 z-0',
+            {
+              '-bottom-24 right-0': !inversed,
+              '-top-24 left-0': inversed,
+            },
+          )}
+        />
+      )}
+      {bgImage && (
+        <div className="absolute inset-0 z-0">
+          <Image src={bgImage} alt={title} className="object-cover opacity-50" />
+          <div className="absolute inset-0 bg-gradient-to-t from-body-bg to-transparent" />
+        </div>
+      )}
+      <Container>
+        <div className="relative flex flex-col gap-4 items-center justify-center">
+          <div ref={ref} className="px-4 md-px-0">
+            <div className="flex flex-col gap-4 items-center justify-center">
+              <motion.div
+                initial={{
+                  transform: translateY,
+                }}
+                custom={0}
+                animate={controls}>
+                <DisplayHeading text={title} tag={headingTag} />
+              </motion.div>
+              {description && (
+                <motion.div
+                  initial={{
+                    transform: translateY,
+                  }}
+                  custom={1}
+                  animate={controls}>
+                  <HtmlContent className="mb-0" align={COPY_ALIGN.CENTER} data={description} />
+                </motion.div>
+              )}
+              {buttonData && (
+                <motion.div
+                  initial={{
+                    transform: translateY,
+                  }}
+                  custom={2}
+                  animate={controls}>
+                  <div className="flex items-center">
+                    <Button {...buttonData} />
+                  </div>
+                </motion.div>
+              )}
+            </div>
+          </div>
+          {(image || video) && (
+            <div className="relative w-full md:w-1/2 z-0">
+              <div className="relative scale-[1.35] rounded overflow-hidden shadow aspect-[16/9] mt-20">
+                {image && <Image src={image} alt={title} fill />}
+                {video && (
+                  <Video
+                    sources={video.sources}
+                    options={{
+                      autoplay: true,
+                      muted: true,
+                      controls: false,
+                      loop: true,
+                    }}
+                    aspectRatioValue={video.aspectRatioValue}
+                  />
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+PanelIntro.displayName = 'PanelIntro';
+
+export default PanelIntro;
+export type { Props };

package/src/components/PanelIntro/PanelIntro.types.ts

@@ -0,0 +1,19 @@
+import { Props as ButtonProps } from '../Button/Button.types';
+import { Props as VideoProps } from '../Video/Video.types';
+import { SPACING } from '../Hero/Hero.types';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+
+export interface Props {
+  testID?: string;
+  inversed?: boolean;
+  title: string;
+  headingTag?: HEADING_TAGS;
+  description?: string;
+  buttonData?: ButtonProps;
+  image?: string;
+  video?: VideoProps;
+  withBg?: boolean;
+  spacing?: SPACING;
+  className?: string;
+  bgImage?: string;
+}

package/src/components/PanelIntro/index.ts

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

package/src/components/PanelProduct/PanelProduct.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import PanelProduct from '.';
+
+const meta: Meta<typeof PanelProduct> = {
+  title: 'ORGANISMS/PanelProduct',
+  component: PanelProduct,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof PanelProduct>;
+
+export const Default: Story = {
+  args: {
+    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!",
+  },
+};
+
+export default meta;