oddsgate-ds 1.0.112 → 1.0.113

package/dist/esm/types/components/molecules/ProductCard/ProductCard.component.d.ts

@@ -1,4 +1,4 @@
 import { IProductCard } from './ProductCard.interface';
 import React from 'react';
-declare const ProductCard: ({ title, imageElement, description, className, style, ...props }: IProductCard) => React.JSX.Element;
+declare const ProductCard: ({ title, imageElement, linkElement, description, className, style, ...props }: IProductCard) => React.JSX.Element;
 export default ProductCard;

package/dist/esm/types/components/molecules/ProductCard/ProductCard.interface.d.ts

@@ -3,4 +3,5 @@ import { ICard } from '../Card/Card.interface';
 export interface IProductCard extends ICard {
     title?: string;
     description?: string | React.ReactElement;
+    linkElement?: React.ReactElement;
 }

package/dist/esm/types/components/organisms/CircularSliderTeste/CircularSliderTeste.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ICircularSliderTeste } from './CircularSliderTeste.interface';
+declare const CircularSliderTeste: ({ cta, content, style, className, }: ICircularSliderTeste) => React.JSX.Element;
+export default CircularSliderTeste;

package/dist/esm/types/components/organisms/CircularSliderTeste/CircularSliderTeste.interface.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export type ICircularSliderTeste = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    content?: {
+        name?: string;
+        role?: string;
+        img?: React.ReactNode;
+    }[];
+    cta?: React.ReactNode;
+};

package/dist/esm/types/components/organisms/CircularSliderTeste/CircularSliderTeste.theme.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ICircularSliderTeste } from './CircularSliderTeste.interface';
+export declare const StyledCircularSliderTeste: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
+export declare const StyledCircularSliderTesteWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
+export declare const StyledCircularSliderTesteSlides: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
+export declare const StyledCircularSliderTesteSlide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
+export declare const StyledCircularSliderTesteContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;

package/dist/esm/types/components/organisms/CircularSliderTeste/index.d.ts

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

package/dist/types.d.ts

@@ -528,9 +528,10 @@ declare const LogosCard: ({ imageElement, title, className, style, ...props }: I
 interface IProductCard extends ICard {
     title?: string;
     description?: string | React.ReactElement;
+    linkElement?: React.ReactElement;
 }
 
-declare const ProductCard: ({ title, imageElement, description, className, style, ...props }: IProductCard) => React__default.JSX.Element;
+declare const ProductCard: ({ title, imageElement, linkElement, description, className, style, ...props }: IProductCard) => React__default.JSX.Element;
 
 interface ILicenseCard extends ICard {
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.112",
+  "version": "1.0.113",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -122,9 +122,11 @@ export const StyledFieldContainer = styled.div<IFormField>`
 
   ::placeholder {
     color: rbga(${colors.third10}, 0.2);
+    font-weight:700;
   }
 
   ::-ms-input-placeholder { /* Edge 12 -18 */
     color: rbga(${colors.third10}, 0.2);
+    font-weight:700;
   }
 `

package/src/components/atoms/RichText/RichText.theme.ts

@@ -5,6 +5,8 @@ import { IRichText } from './RichText.interface';
 import { fontSize } from '@/styles/utilities';
 
 export const StyledRichText = styled.div<IRichText>`
+  display: block;
+
   & p {
     margin: 0;
   }

package/src/components/molecules/BlogCard/BlogCard.component.tsx

@@ -28,14 +28,14 @@ const BlogCard = ({
         </>
       }
     >
-      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis mt-4'}>
+      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
         {title}
       </Heading>
       <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
         {description}
       </Heading>
       {date && (
-        <RichText tag={'span'} className="fw-bold mt-4">
+        <RichText tag={'span'} className="d-block fw-bold mt-4">
           {date}
         </RichText>
       )}

package/src/components/molecules/BlogCard/BlogCard.theme.ts

@@ -27,7 +27,9 @@ export const StyledBlogCard = styled(Card) <IBlogCard>`
   }
 
   & figcaption{
-
+    h3{
+      line-height: 1.1;
+    }
   }
 
   &:hover{

package/src/components/molecules/NewsCard/NewsCard.component.tsx

@@ -21,17 +21,18 @@ const NewsCard = ({
       $variant={variant}
       imageElement={
         <>
-          {category && <Chip variant='light' className='font-epilogue'>{category}</Chip>}
           <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
         </>
       }
     >
-      <Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis mt-4'}>
-        {title}
-      </Heading>
-      <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
-        {description}
-      </Heading>
+      <div>
+        <Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis'}>
+          {title}
+        </Heading>
+        <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
+          {description}
+        </Heading>
+      </div>
       {date && (
         <Heading tag={'span'} size={variant === "featured" ? "h5" : 'texts'} className={'fw-bold mt-4'}>
           {date}

package/src/components/molecules/NewsCard/NewsCard.theme.ts

@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components';
 import Card from '../Card/Card.component';
 import { INewsCard } from './NewsCard.interface';
 import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
-import { variables } from '@/index';
 
 export const StyledNewsCard = styled(Card) <INewsCard>`
   padding: 1rem;
@@ -42,7 +41,8 @@ export const StyledNewsCard = styled(Card) <INewsCard>`
           @media only screen and (min-width: ${responsiveMedia}) {
 
             display: flex;
-            align-items:center;
+            align-items:stretch;
+            justify-content: space-between;
             flex-flow: row-reverse;
 
             ${StyledChip}{
@@ -55,7 +55,11 @@ export const StyledNewsCard = styled(Card) <INewsCard>`
               width: 45%;
             }
             & figcaption{
-              width: 55%;
+              display: flex;
+              flex-flow: column;
+              justify-content: space-between;
+
+              width: 45%;
               padding:1.6rem;
             }
           }

package/src/components/molecules/ProductCard/ProductCard.component.tsx

@@ -9,6 +9,7 @@ import RichText from '@/components/atoms/RichText/RichText.component'
 const ProductCard = ({
   title,
   imageElement,
+  linkElement,
   description,
   className,
   style,
@@ -25,10 +26,10 @@ const ProductCard = ({
   let firstRowTitle;
   let secondRowTitle;
 
-  if(parts.length>1){
+  if (parts.length > 1) {
     firstRowTitle = parts.slice(0, half).join(" ")
     secondRowTitle = parts.slice(half, parts?.length).join(" ")
-  }else{
+  } else {
     firstRowTitle = title;
   }
 
@@ -45,6 +46,8 @@ const ProductCard = ({
         </Heading>
       </StyledProductCardWrapper>
       {description && <RichText tag='p' className='color-secondary50 mt-6'>{description}</RichText>}
+
+      {linkElement}
     </StyledProductCard>
   )
 }

package/src/components/molecules/ProductCard/ProductCard.interface.ts

@@ -3,4 +3,5 @@ import { ICard } from '../Card/Card.interface';
 export interface IProductCard extends ICard {
   title?: string
   description?: string | React.ReactElement
+  linkElement?: React.ReactElement
 }

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -25,6 +25,7 @@ const CircularSlider = ({
   });
   const slider = useRef<HTMLDivElement>();
   const wrapper = useRef<HTMLDivElement>();
+  const svg = useRef<HTMLDivElement>();
   const slidesHolder = useRef<HTMLDivElement>();
   const contentHolder = useRef<HTMLDivElement>();
 
@@ -80,9 +81,9 @@ const CircularSlider = ({
 
       slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 50);
 
-      if(!isMobile){
+      if (!isMobile) {
         slidesHolder.current.style.marginTop = radius * slideSize + 'px';
-      }else{
+      } else {
         wrapper.current.style.marginTop = -(r - slidesSize) + 'px';
       }
 
@@ -147,6 +148,7 @@ const CircularSlider = ({
       currentAngle = direction === "-" ? (currentAngle + newAngle) : (currentAngle - newAngle);
       currentSlide = newSlide;
 
+      if (svg?.current) svg.current.style.transform = 'translate(-50%, -50%) rotate( ' + currentAngle * 4 + 'deg )';
       slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )';
       addStyle();
     }
@@ -174,7 +176,7 @@ const CircularSlider = ({
 
   return (
     <StyledCircularSlider ref={slider as any} className={className} style={style}>
-      <svg viewBox="0 0 907 906" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg ref={svg as any} viewBox="0 0 907 906" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M887.551 584.892L904.187 504.729L531.591 461.981C531.824 459.769 532.012 457.775 531.984 455.735L906.794 468.208L902.047 386.545L531.043 441.754C530.798 439.669 530.336 437.54 529.829 435.627L895.322 350.347L869.628 272.699L525.63 422.1C524.69 420.097 523.922 418.356 522.981 416.353L853.852 239.821L808.868 171.277L515.038 404.535C513.792 402.92 512.328 401.26 510.82 399.817L784.811 143.459L723.799 88.9898L500.604 390.24C498.834 388.969 497.28 387.742 495.465 386.688L693.744 68.2895L620.714 31.439L483.014 380.262C481.154 379.424 479.032 378.757 477.127 378.136L585.693 19.4255L505.53 2.78951L462.783 375.385C460.571 375.152 458.576 374.964 456.537 374.993L469.01 0.182176L387.347 4.92974L442.556 375.933C440.471 376.179 438.342 376.641 436.429 377.148L351.149 11.6549L273.501 37.3486L422.902 381.346C420.899 382.286 419.158 383.055 417.155 383.995L240.361 53.2959L171.817 98.2799L405.12 391.893C403.505 393.14 401.846 394.603 400.403 396.112L144.261 122.166L89.7918 183.178L391.042 406.373C389.77 408.143 388.544 409.696 387.49 411.511L69.2632 213.494L32.4127 286.524L381.235 424.224C380.397 426.084 379.731 428.206 379.11 430.111L20.2275 321.283L3.59147 401.446L376.187 444.194C375.954 446.405 375.766 448.4 375.795 450.44L0.984138 437.967L5.73169 519.63L376.735 464.42C376.981 466.505 377.443 468.635 377.95 470.548L12.4569 555.828L38.1505 633.476L382.148 484.075C383.088 486.078 383.857 487.819 384.797 489.822L54.0979 666.616L99.0819 735.16L392.695 501.857C393.942 503.471 395.405 505.131 396.914 506.574L122.968 762.715L183.98 817.185L407.175 515.935C408.945 517.206 410.498 518.432 412.313 519.487L214.034 837.885L287.064 874.736L424.765 525.913C426.625 526.751 428.746 527.417 430.651 528.038L322.085 886.749L402.248 903.385L444.996 530.789C447.207 531.022 449.202 531.21 451.242 531.182L438.769 905.992L520.432 901.245L465.222 530.241C467.307 529.996 469.437 529.534 471.35 529.027L556.629 894.52L634.278 868.826L484.876 524.828C486.88 523.888 488.621 523.12 490.624 522.179L667.156 853.05L735.7 808.066L502.442 514.236C504.056 512.99 505.716 511.526 507.159 510.018L763.517 784.009L817.987 722.997L516.737 499.802C518.008 498.032 519.234 496.478 520.289 494.663L838.687 692.942L875.538 619.912L526.715 482.212C527.553 480.352 528.219 478.23 528.84 476.325L887.551 584.892Z" fill="#FC3151" />
       </svg>
       <StyledCircularSliderWrapper ref={wrapper as any}>

package/src/components/organisms/CircularSlider/CircularSlider.theme.ts

@@ -12,7 +12,7 @@ export const StyledCircularSlider = styled.div<ICircularSlider>`
     position:absolute;
     top:50%;
     left:0;
-    width:66.666%;
+    width:55%;
     height:auto;
     transform: translate(-50%, -50%)
   }
@@ -21,8 +21,14 @@ export const StyledCircularSlider = styled.div<ICircularSlider>`
     min-height: 100dvh;
     & > svg{
       display: block;
+      transition: all 0.8s ease-in-out;
     }
   }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(80deg); }
+  }
 `;
 
 export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.component.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  StyledCircularSliderTeste,
+  StyledCircularSliderTesteContent,
+  StyledCircularSliderTesteSlide,
+  StyledCircularSliderTesteSlides,
+  StyledCircularSliderTesteWrapper
+} from './CircularSliderTeste.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component';
+import { ICircularSliderTeste } from './CircularSliderTeste.interface'
+import { debounce } from '@/helpers/events';
+import useMediaMatch from '@/helpers/useMediaMatch';
+
+const CircularSliderTeste = ({
+  cta,
+  content,
+  style,
+  className,
+}: ICircularSliderTeste) => {
+
+  const [slideContent, setSlideContent] = useState({
+    name: content && content[0].name,
+    role: content && content[0].role,
+  });
+  const slider = useRef<HTMLDivElement>();
+  const wrapper = useRef<HTMLDivElement>();
+  const slidesHolder = useRef<HTMLDivElement>();
+  const contentHolder = useRef<HTMLDivElement>();
+
+  //force 12 items
+  if (content && content.length < 12) {
+    let counter = 0;
+    for (let i = content.length; i <= 12; i++) {
+      content[i] = content[counter];
+      counter++;
+    }
+  }
+
+  useEffect(() => {
+    if (!slidesHolder.current) return //bail out;
+
+    const animationDuration = 600;
+
+    const slides = Array.prototype.slice.call(slidesHolder?.current?.children);
+
+    let slidesSize = 0;
+
+    let currentAngle =  -180;
+
+    const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
+    // const stepAngle = 0.52;
+
+    let currentSlide = 0;
+
+    slidesHolder.current.style.transitionDuration = animationDuration + 'ms';
+    const slidesRepositioning = (r) => {
+      for (let i = 0; i < slides.length; i++) {
+
+        let x = r * Math.cos(stepAngle * i - Math.PI / 2),
+          y = r * Math.sin(stepAngle * i - Math.PI / 2);
+
+        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + ((stepAngle * 180 / Math.PI * i) + 4) + 'deg )';
+        // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
+      };
+    }
+    const setSize = (radius: number) => {
+      if (!wrapper.current || !slidesHolder.current) return //bail out;
+
+      const slideSize = 0.15;
+
+      wrapper.current.style.width = 2 * radius + 'px';
+      wrapper.current.style.height = 2 * radius + 'px';
+
+      let r = 2 * radius * (1 - slideSize);
+      slidesHolder.current.style.width = r*2 + 'px';
+      slidesHolder.current.style.height = r/2 + 'px';
+      slidesRepositioning(r / 2);
+
+      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 50);
+
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].style.width = slides[i].style.height = slidesSize + 'px';
+      };
+
+    }
+
+    const sliderResize = debounce(() => {
+      const sliderSize = 1;
+
+      let radius,
+        w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
+        h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
+
+      2 * h <= w ? radius = h * sliderSize : radius = (w / 2) * sliderSize;
+
+      setSize(Math.round(radius));
+    }, 250)
+
+    const addStyle = () => {
+      setTimeout(() => {
+        contentHolder?.current?.classList.add('active');
+        slides[currentSlide].classList.add('active');
+      }, 400);
+    };
+    const removeStyle = () => {
+      contentHolder?.current?.classList.remove('active');
+      const prevElement = slides[currentSlide];
+      setTimeout(() => {
+        content && setSlideContent(content[currentSlide] as any)
+        prevElement.classList.remove('active');
+      }, 400);
+    };
+
+    const rotateSlider = (e) => {
+      const newSlide = slides.indexOf(e.target);
+
+      if (currentSlide === newSlide || !slidesHolder?.current) return;
+
+      removeStyle();
+
+      let multiplier = 0;
+      let direction = "";
+
+      if (currentSlide === 0 && newSlide === (slides.length - 1)) {
+        multiplier = -1;
+        direction = "-";
+      } else if (currentSlide === (slides.length - 1) && newSlide === 0) {
+        multiplier = 1;
+        direction = "+";
+      } else {
+        multiplier = newSlide - currentSlide
+        direction = currentSlide < newSlide ? "+" : "-";
+      }
+
+      const newAngle = Math.abs((stepAngle * 180 / Math.PI) * multiplier);
+
+
+      currentAngle = direction === "-" ? (currentAngle + newAngle) : (currentAngle - newAngle);
+      currentSlide = newSlide;
+
+      slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )';
+      addStyle();
+    }
+
+    sliderResize();
+    addStyle();
+
+
+    for (let i = 0; i < slides.length; i++) {
+      slides[i].addEventListener('click', rotateSlider, { passive: true });
+    };
+
+    window.addEventListener('resize', sliderResize)
+
+    return () => {
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].removeEventListener('click', rotateSlider);
+      };
+
+      window.removeEventListener('resize', sliderResize)
+    }
+  }, [])
+
+  if (!content) return <></>
+
+  return (
+    <StyledCircularSliderTeste ref={slider as any} className={className} style={style}>
+      <StyledCircularSliderTesteWrapper ref={wrapper as any}>
+        <StyledCircularSliderTesteSlides ref={slidesHolder as any}>
+          {content?.map((item, index) => {
+            return (
+              <StyledCircularSliderTesteSlide key={`slide-${index}`}>{item.img}</StyledCircularSliderTesteSlide>
+            )
+          })}
+        </StyledCircularSliderTesteSlides>
+      </StyledCircularSliderTesteWrapper>
+      <StyledCircularSliderTesteContent ref={contentHolder as any}>
+        <div className='mb-4'>
+          <Heading tag="span" size="h2" className='color-primary50 fw-bold'>{slideContent?.name}</Heading>
+          <Heading tag="span" size="h4" className='color-secondary50'>{slideContent?.role}</Heading>
+        </div>
+        {cta}
+      </StyledCircularSliderTesteContent>
+    </StyledCircularSliderTeste>
+
+  )
+}
+
+export default CircularSliderTeste

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.interface.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+
+export type ICircularSliderTeste = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  content?: {
+    name?: string,
+    role?: string,
+    img?: React.ReactNode
+  }[],
+  cta?: React.ReactNode
+}

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '@/components/atoms/Button/Button.component'
+import CircularSliderTeste from './CircularSliderTeste.component'
+import { ICircularSliderTeste } from './CircularSliderTeste.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CircularSliderTeste',
+  component: CircularSliderTeste,
+  tags: ['autodocs']
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<ICircularSliderTeste> = {
+  render: args => <div style={{ width: "100%", height: "200dvh" }}><CircularSliderTeste {...args}></CircularSliderTeste></div>,
+  args: {
+    cta: <Button variant={'secondary'}>Join the Team</Button>,
+    content: [
+      {
+        name: 'My name 1',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 2',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 3',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 4',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 5',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 6',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 7',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 9',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 9',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 10',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 11',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 1§2',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 13',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 14',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 15',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 16',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 17',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 19',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 19',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 20',
+        role: 'My role',
+        img: image
+      }
+    ],
+    className: "h-100",
+  }
+}