@hellobetterdigitalnz/selwynui 0.0.1-50 → 0.0.1-53

package/src/Components/DataDisplay/Accordion/Accordion.stories.tsx

@@ -6,6 +6,8 @@ import Accordion from './Accordion.tsx';
 import AccordionItem from './AccordionItem.tsx';
 import Container from "../../Shared/Container/Container";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import Button from "../../Form/Button/Button.tsx";
+import { ArrowRight } from "@hellobetterdigitalnz/selwynui";
 
 const meta: Meta = {
   title: 'DataDisplay / Accordion',
@@ -22,7 +24,6 @@ type Story = StoryObj<typeof meta>;
 
 const AccordionTemplate: Story = {
     render: ({ items, ...args }) => {
-        // keep track of open states by index
         const [openItems, setOpenItems] = useState<Record<string, boolean>>({});
 
         const handleToggle = (id: string, value: boolean) => {
@@ -31,8 +32,7 @@ const AccordionTemplate: Story = {
 
         return (
             <ElementHolder paddingBottom="md" paddingTop="sm" pillar="visit">
-                <Container>
-                    <Accordion {...args}>
+                 <Accordion {...args}>
                         {items.map((item: any) => (
                             <AccordionItem
                                 key={item.index}
@@ -45,9 +45,6 @@ const AccordionTemplate: Story = {
                             </AccordionItem>
                         ))}
                     </Accordion>
-                </Container>
-
-                {/* Buttons to trigger specific IDs */}
             </ElementHolder>
         );
     },
@@ -58,32 +55,23 @@ export const Example = {
   args: {
     allowMultiple:true,
     title: 'Insights lorem ipsum dolor sit amet',
-    content: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
     // image: '/img/accordion-image.svg',
     items: [
       {
         index:'1',
         title: 'Lorem ipsum dolor',
-        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+        children: <p>Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.</p>
       },
       {
         index:'2',
         title: 'Lorem ipsum dolor',
         children: <>
-        <p>'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'</p>
+        <p>Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.</p>
+        <Button label="LEARN MORE" secondaryIcon={<ArrowRight/>} pillar="taste"/>
         <img src="/img/accordion-image.svg" alt="" />
         </>,
       },
-      {
-        index:'3',
-        title: 'Lorem ipsum dolor',
-        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
-      },
-      {
-        index:'4',
-        title: 'Lorem ipsum dolor',
-        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
-      },
     ],
   },
 };

package/src/Components/DataDisplay/Accordion/Accordion.tsx

@@ -3,6 +3,7 @@ import AccordionProvider from "./AccordionProvider";
 import AccordionProps from "./AccordionProps.tsx";
 import ScrollFadeIn from "../../Shared/ScrollFadeIn/ScrollFadeIn.tsx";
 import AccordionBgDesign from "./accordion-bg-design.tsx";
+import { Container } from "../../Shared/index.ts";
 
 const Accordion = (props: AccordionProps) => {
   const {
@@ -31,7 +32,8 @@ const Accordion = (props: AccordionProps) => {
 
   return (
     <AccordionProvider allowMultiple={allowMultiple ?? false} >
-      <div className={styles.accordionBlock}>
+      <Container>
+        <div className={styles.accordionBlock} >
         {title && (
           <div className={styles.accordionHeading}>
             <ScrollFadeIn>
@@ -42,12 +44,13 @@ const Accordion = (props: AccordionProps) => {
 
         )}
         <div className={`${styles.accordionWrapper}`}>
-          <div className={styles.accordionBgDesignContainer}>
-            <AccordionBgDesign />
-          </div>
           {children}
         </div>
+        <div className={styles.accordionBgDesignContainer}>
+            <AccordionBgDesign />
+          </div>
       </div>
+      </Container>
     </AccordionProvider>
   );
 };

package/src/Components/DataDisplay/Accordion/AccordionItem.tsx

@@ -132,7 +132,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                     <h4>{title}</h4>
                 </div>
                 <div className={`${styles.icon} accordionIcon`}>
-                    {isOpened ? <CaretUp /> : <CaretDown />}
+                    {isOpened ? <CaretUp/> : <CaretDown />}
                 </div>
             </div>
 
@@ -150,7 +150,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                 </div>
             </div>
 
-            <hr className={styles.accordionHorizontalLine}/>
+            <div className={styles.accordionHorizontalLine}></div>
             
         </div>
     );

package/src/Components/DataDisplay/Accordion/AccordionProps.tsx

@@ -1,4 +1,4 @@
-import {ReactNode} from "react";
+import { ReactNode } from "react";
 
 interface AccordionProps {
   allowMultiple?: boolean;
@@ -8,6 +8,7 @@ interface AccordionProps {
   image?: string;
   activeId?: number | null;
   onActiveIdChange?: (id: number | null) => void;
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
 }
 
 export default AccordionProps;

package/src/Components/DataDisplay/Accordion/accordion-bg-design.tsx

@@ -1,11 +1,11 @@
 const AccordionBgDesign = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="543" height="490" viewBox="0 0 543 490" fill="none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="639" height="577" viewBox="0 0 639 577" fill="none">
             <g opacity="0.05">
-                <path d="M0 251.765C145.603 251.765 263.669 358.442 263.669 490H0V251.765Z" fill="#92C134" />
-                <path d="M0 0.0778264C145.603 0.0778264 263.669 106.755 263.669 238.313H0V0.0778264Z" fill="#92C134" />
-                <path d="M543 489.922C543 358.364 424.934 251.687 279.331 251.687V489.922H543Z" fill="#92C134" />
-                <path d="M543 238.235C543 106.677 424.934 0 279.331 0V238.235H543Z" fill="#92C134" />
+                <path d="M639 296.466C467.655 296.466 328.715 422.083 328.715 577H639V296.466Z" fill="currentColor" />
+                <path d="M639 0.0916445C467.655 0.0916445 328.715 125.71 328.715 280.626H639V0.0916445Z" fill="currentColor" />
+                <path d="M0 576.908C0 421.992 138.94 296.374 310.285 296.374V576.908H0Z" fill="currentColor" />
+                <path d="M0 280.534C0 125.618 138.94 0 310.285 0V280.534H0Z" fill="currentColor" />
             </g>
         </svg>
     )

package/src/Components/DataDisplay/Accordion/accordion.module.scss

@@ -4,7 +4,8 @@
             font-size: var(--font-size-h4);
             font-weight: var(--font-weight-bold);
             line-height: var(--line-height-h4);
-            padding-bottom: 72px;
+            letter-spacing: var(--letter-spacing-h4);
+            padding-bottom: 32px;
         }
 
         p {
@@ -19,7 +20,6 @@
     }
 
     .accordionWrapper {
-        margin-block: 72px;
 
         .title {
             flex: 1;
@@ -32,46 +32,61 @@
                 font-weight: var(--font-weight-bold);
                 line-height: var(--line-height-body-regular);
             }
+        }
 
-            .accordionIcon {
-                display: flex;
-                align-items: center;
-                margin-right: 4px;
+        .icon {
+            display: flex;
+            align-items: center;
+            margin-right: 4px;
 
-                svg {
-                    width: 24px;
-                    height: 24px;
-                }
+            svg {
+                width: 24px !important;
+                height: 24px !important;
             }
         }
 
+
         .accordion {
             display: flex;
             flex-direction: column;
             overflow: hidden;
+
+            .accordionHorizontalLine {
+                border-bottom: 1px solid var(--color-text);
+                height: 0;
+                width: 100%;
+            }
         }
 
         .header {
             display: flex;
             align-items: center;
             cursor: pointer;
+            padding: 16px 32px;
         }
 
         .accordionBodyHolder {
             .accordionBody {
-                font-size: var(--font-size-body-regular);
-                font-weight: var(--font-weight-body-regular);
-            }
-        }
 
-        .accordionHorizontalLine {
-            background: var(--color-text);
-            margin-block: 16px;
+                img {
+                    width: 100%;
+                    padding: 32px 0;
+                }
+            }
         }
 
         .bodyInner {
             font-size: var(--font-size-body-regular);
             font-weight: var(--font-weight-body-regular);
+            padding-left: 32px;
+
+            p {
+                margin: 8px 32px 32px 0;
+                font-size: var(--font-size-body-regular);
+                font-weight: var(--font-weight-body-regular);
+                padding: 0 16px 0 0;
+                line-height: var(--line-height-body-regular);
+            }
         }
     }
 
@@ -79,25 +94,29 @@
 
         display: flex;
         flex-grow: 1;
-        gap: 90px;
+        margin: 0 -45px;
 
         .accordionHeading {
-            width: 50%;
+            width: 39%;
+            padding: 0 45px;
+
+            h2 {
+                padding-bottom: 72px;
+            }
         }
 
         .accordionWrapper {
-            width: 50%;
+            width: 61%;
             position: relative;
+            padding: 0 45px;
         }
 
         .accordionBgDesignContainer {
             position: absolute;
-            top: -40px;
+            top: 191px;
             right: 0;
             pointer-events: none;
             display: block;
         }
     }
-
-
 }

package/src/Components/DataDisplay/ChatItenaryBlock/ChatItenaryBlock.tsx

@@ -63,7 +63,7 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
 
         <div className={`${styles.chatItineraryBlock} ${styles.hero}`}>
           <div style={{backgroundImage: `url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg')`}} className={styles.heroBackground}></div>
-          <Container>
+          <Container border={false}>
             <div className={styles.heroContent}>
               <h1 className={styles.titleHeader}>
                 Kia ora, I’m your AI<br />

package/src/Components/DataDisplay/ContactsBlock/ContactsBlock.stories.tsx

@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 const ContactsBlockTemplate: Story = {
     render: () => {
         return (
-            <ElementHolder paddingTop="md" paddingBottom="md" pillar="business" level="light">
+            <ElementHolder paddingTop="md" paddingBottom="md" pillar="live" level="light">
                 <ContactBlock contactBlockTitle={'Meet the team'}>
                   <ContactItem
                     image={'./img/contact-image.svg'}

package/src/Components/DataDisplay/ContactsBlock/contactsBlock.module.scss

@@ -37,12 +37,15 @@
                         font-size: var(--font-size-h6);
                         font-weight: var(--font-weight-bold);
                         line-height: var(--line-height-h6);
+                        letter-spacing: -0.56px;
+
                     }
 
                     h2 {
                         font-size: var(--font-size-h6);
                         font-weight: var(--font-weight-h4);
                         line-height: var(--line-height-h6);
+                        letter-spacing: -0.56px;
                     }
                 }
 
@@ -113,11 +116,13 @@
                     }
 
                     .contactMiddleContent {
-                        padding-block: 24px;
+                        padding-block: 58px;
 
                         p {
                             font-size: var(--font-size-small);
                             font-weight: var(--font-weight-h4);
+                            letter-spacing: -0.48px;
+                            text-decoration: underline;
                         }
                     }
 

package/src/Components/DataDisplay/DetailsCard/DetailsCard.tsx

@@ -11,11 +11,13 @@ const DetailsCard = (props: DetailsCardProps) => {
       image = '',
       variation= 'long',
       link = {},
+      pillar = 'visit'
     } = props;
 
     const classes = [
         styles.detailsCard,
-        "detailsCard",  
+        "detailsCard",
+        `${pillar}`
     ];
     
     if(variation==='short') {

package/src/Components/DataDisplay/ImageContent/ImageContent.stories.tsx

@@ -31,6 +31,8 @@ const ImageContentTemplate: Story = {
          level={'light'}
        >
          <ImageContent
+           paddingTop={'md'}
+           paddingBottom={'md'}
            title={'Lorem'}
            boldTitle={'ipsum dolor'}
            content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'}

package/src/Components/DataDisplay/ImageContent/ImageContent.tsx

@@ -20,6 +20,8 @@ const ImageContent = (props:  ImageContentProps) => {
     imageBorder = "top-right",
     rendition = "contained",
     list,
+    spaceTop = 'none',
+    spaceBottom = 'none',
   } = props;
 
   const pillarLogo = (
@@ -39,7 +41,7 @@ const ImageContent = (props:  ImageContentProps) => {
 
   if (rendition === 'full'){
     return <div className={`${styles.imageContent} ${styles.imageContentFull}  ${styles[imageBorder]} `}>
-      <Container>
+      <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
         <div className={styles.imageContentWrapper}>
           <div className={styles.content}>
             <div className={styles.contentWrapper}>
@@ -85,7 +87,7 @@ const ImageContent = (props:  ImageContentProps) => {
 
   if(rendition === "fluid"){
     return <div className={`${styles.imageContent} ${styles.imageContentFluid} ${styles[alignment]}`}>
-      <Container>
+      <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
         <div className={styles.imageContentWrapper}>
           <div className={styles.imageWrapper}>
             <div className={styles.imageHolder}>
@@ -125,7 +127,7 @@ const ImageContent = (props:  ImageContentProps) => {
   if (rendition === 'masked'){
     return (
       <div className={`${styles.imageContent} ${styles.maskedImageContent} ${styles[alignment]}`}>
-        <Container>
+        <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
           <div className={styles.imageContentWrapper}>
 
             {/* IMAGE BLOCK */}
@@ -158,7 +160,7 @@ const ImageContent = (props:  ImageContentProps) => {
 
 
   return <div className={`${styles.imageContent} ${styles[alignment]}`}>
-    <Container>
+    <Container spaceTop={spaceTop} spaceBottom={spaceBottom}>
       <div className={styles.imageContentWrapper}>
         <div className={styles.imageWrapper}>
           <div className={styles.imageHolder}>

package/src/Components/DataDisplay/ImageContent/ImageContentProps.tsx

@@ -14,6 +14,8 @@ export type RenditionType =
   | "contained"
   | "masked";
 
+type SpacingOption = "none" | "xsm" |"sm" | "md" | "lg" | "xl"
+
 export interface ImageSet {
   single?: string;
   setOfFour?: [string, string, string, string];
@@ -38,6 +40,8 @@ export interface ImageContentProps {
   imageBorder?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
   rendition?: RenditionType;
   list?: Item[];
+  spaceTop?: SpacingOption
+  spaceBottom?: SpacingOption
 }
 
 export default ImageContentProps;

package/src/Components/DataDisplay/KPIBlock/KPIBlock.stories.tsx

@@ -54,7 +54,7 @@ const KPIBlockBusinessTemplate: Story = {
 
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="secondary">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="business" level="light">
         <KPIBlock
           title={'Business Growth Statistics'}
           description={'Our comprehensive approach to business development has yielded impressive results across multiple sectors.'}

package/src/Components/DataDisplay/KPIBlock/KPIBlock.tsx

@@ -2,7 +2,6 @@ import KPIBlockProps from "./KPIBlockProps.tsx";
 import styles from './kpiBlock.module.scss';
 import Container from "../../Shared/Container/Container.tsx";
 import PillarIcon from "../../Shared/PillarIcon/PillarIcon.tsx";
-import ElementHolder from "../../Shared/ElementHolder/ElementHolder.tsx";
 import cslx from "clsx";
 
 
@@ -12,11 +11,6 @@ const KPIBlock = (props: KPIBlockProps) => {
     description,
     stats = [],
     pillar ,
-    paddingTop,
-    paddingBottom,
-    level,
-    marginBottom,
-    marginTop,
     spacingBottom='xsm',
   } = props;
 
@@ -29,14 +23,6 @@ const KPIBlock = (props: KPIBlockProps) => {
   );
 
   return (
-    <ElementHolder
-      paddingTop={paddingTop}
-      paddingBottom={paddingBottom}
-      pillar={pillar}
-      level={level}
-      marginBottom={marginBottom}
-      marginTop={marginTop}
-    >
     <div className={`${styles.kpi} ${className}`}>
       <Container>
         <div className={styles.kpiWrapper}>
@@ -54,11 +40,10 @@ const KPIBlock = (props: KPIBlockProps) => {
           </div>
         </div>
       </Container>
-    </div>
       <div className={styles.pillarIcon}>
         <PillarIcon pillar={pillar}/>
       </div>
-    </ElementHolder>
+    </div>
   );
 };
 

package/src/Components/DataDisplay/KPIBlock/kpiBlock.module.scss

@@ -72,6 +72,7 @@
     display: flex;
     flex-direction: inherit;
     align-items: start;
+    width: 100%;
 
     @media (max-width: 900px) {
       flex-direction: column;
@@ -207,6 +208,7 @@
 }
 
 .pillarIcon {
+  color: var(--color-block-text);
   position: absolute;
   right: 0;
   bottom: 0;

package/src/Components/DataDisplay/Media/Media.stories.tsx

@@ -21,17 +21,11 @@ const PathwayBlockTemplate: Story = {
   render: () => {
 
     const mediaProps = {
-      imageSrc: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1200&h=675&fit=crop",
+      thumbnail: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1200&h=675&fit=crop",
       videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
     };
 
-    return (
-      <>
-        <ElementHolder pillar="taste">
-         <Media {...mediaProps} />
-        </ElementHolder>
-      </>
-    )
+    return <Media pillar={'visit'}  {...mediaProps} />
   }
 }
 

package/src/Components/DataDisplay/Media/Media.tsx

@@ -1,57 +1,92 @@
 import MediaProps from "./MediaProps.tsx";
-import {useEffect, useRef} from "react";
+import { useEffect, useRef } from "react";
 import videojs from "video.js";
-import 'video.js/dist/video-js.css';
-import './media.scss'
-
-const Media = (props : MediaProps) => {
-
-  const {imageSrc , videoSrc, thumbnail} = props
+import "video.js/dist/video-js.css";
+import styles from "./media.module.scss";
+import  './mediaVideo.scss'
 
+const Media = ({ imageSrc, videoSrc, thumbnail, pillar }: MediaProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const playerRef = useRef<any>(null);
 
   useEffect(() => {
-    if (!playerRef.current && videoRef.current) {
-      const videoElement = videoRef.current;
 
-      playerRef.current = videojs(videoElement, {
+    if (imageSrc) {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+      return;
+    }
+
+    // Init video player only if NO imageSrc
+    if (!playerRef.current && videoRef.current) {
+      playerRef.current = videojs(videoRef.current, {
         controls: true,
         responsive: true,
         fluid: true,
-        preload: 'metadata',
+        preload: "metadata",
         playbackRates: [0.5, 1, 1.5, 2],
         poster: thumbnail,
         controlBar: {
-          volumePanel: {
-            inline: true
-          }
+          volumePanel: { inline: true },
+          playToggle: true,
+          currentTimeDisplay: true,
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          progressControl: true,
+          fullscreenToggle: true,
+          playbackRateMenuButton: true,
+        },
+      });
+
+      // Add custom SVG icon to big play button
+      playerRef.current.ready(() => {
+        const bigPlayButton = playerRef.current.el().querySelector('.vjs-big-play-button');
+        if (bigPlayButton) {
+          bigPlayButton.innerHTML = `
+           <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+            <path d="M13.5 7.47751V40.5225C13.5049 40.7862 13.5792 41.0439 13.7155 41.2698C13.8518 41.4956 14.0452 41.6814 14.2762 41.8086C14.5073 41.9358 14.7678 41.9999 15.0314 41.9943C15.2951 41.9887 15.5527 41.9137 15.7781 41.7769L42.7931 25.2544C43.0089 25.1238 43.1874 24.9397 43.3112 24.72C43.4351 24.5002 43.5001 24.2523 43.5001 24C43.5001 23.7478 43.4351 23.4998 43.3112 23.2801C43.1874 23.0603 43.0089 22.8762 42.7931 22.7456L15.7781 6.22314C15.5527 6.08628 15.2951 6.01128 15.0314 6.00571C14.7678 6.00013 14.5073 6.06418 14.2762 6.19139C14.0452 6.3186 13.8518 6.50448 13.7155 6.73028C13.5792 6.95608 13.5049 7.21382 13.5 7.47751Z" fill="currentColor"/>
+          </svg>
+          `;
         }
       });
     }
 
+
+    if (playerRef.current && videoSrc) {
+      playerRef.current.src({ src: videoSrc, type: "video/mp4" });
+    }
+
+    // Cleanup on unmount
     return () => {
       if (playerRef.current) {
         playerRef.current.dispose();
         playerRef.current = null;
       }
     };
-  }, [imageSrc]);
-
-  return <div className="video-container">
-  <div className="video-wrapper">
-    <div data-vjs-player>
-      <video
-        ref={videoRef}
-        className="video-js vjs-big-play-centered"
-        playsInline
-      >
-        <source src={videoSrc} type="video/mp4" />
-      </video>
-    </div>
-  </div>
-</div>
+  }, [imageSrc, videoSrc, thumbnail]);
 
-}
+  return <div className={`${pillar}`}>
+    {imageSrc ? (
+      <div className={styles.media}>
+        <div className={`${styles.imgWrapper}`}>
+          <img src={imageSrc} alt="" className="media-image" />
+        </div>
+      </div>
+    ) : (
+      <div className="video-container">
+        <div data-vjs-player>
+          <video
+            ref={videoRef}
+            className="video-js vjs-big-play-centered"
+            playsInline
+          />
+        </div>
+      </div>
+    )}
+  </div>
+};
 
-export default Media;
+export default Media;

package/src/Components/DataDisplay/Media/MediaProps.tsx

@@ -2,6 +2,7 @@ interface MediaProps {
   imageSrc?: string
   videoSrc?: string
   thumbnail?:string
+  pillar?: 'live' | 'visit' | 'taste' | 'business' | 'participate'
 }
 
 export default MediaProps