oddsgate-ds 1.0.174 → 1.0.175

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

@@ -1,31 +1,31 @@
-import Heading from '@/components/atoms/Heading'
-import { ITeamCard } from './TeamCard.interface'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-import SocialLinks from '@/components/atoms/SocialLinks/SocialLinks.component'
-import { StyledTeamCard } from './TeamCard.theme'
-
-const TeamCard = ({
-  title,
-  imageElement,
-  role,
-  description,
-  ...props
-}: ITeamCard) => {
-  return (
-    <StyledTeamCard
-      imageElement={
-        <ImageWrapper aspectRatioHeight={78}>{imageElement}</ImageWrapper>
-      }
-    >
-      <Heading tag={'span'} size={'captions'} className={'text-uppercase mt-4'}>
-        {role}
-      </Heading>
-      <Heading tag={'span'} size={'h6'} className={'fw-light mt-2'}>
-        {title}
-      </Heading>
-    </StyledTeamCard>
-  )
-}
-
-export default TeamCard
+import Heading from '@/components/atoms/Heading'
+import { ITeamCard } from './TeamCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import SocialLinks from '@/components/atoms/SocialLinks/SocialLinks.component'
+import { StyledTeamCard } from './TeamCard.theme'
+
+const TeamCard = ({
+  title,
+  imageElement,
+  role,
+  description,
+  ...props
+}: ITeamCard) => {
+  return (
+    <StyledTeamCard
+      imageElement={
+        <ImageWrapper aspectRatioHeight={78}>{imageElement}</ImageWrapper>
+      }
+    >
+      <Heading tag={'span'} size={'captions'} className={'text-uppercase mt-4'}>
+        {role}
+      </Heading>
+      <Heading tag={'span'} size={'h6'} className={'fw-light mt-2'}>
+        {title}
+      </Heading>
+    </StyledTeamCard>
+  )
+}
+
+export default TeamCard

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

@@ -1,7 +1,7 @@
-import { ICard } from '../Card/Card.interface';
-
-export interface ITeamCard extends ICard {
-  title?: string
-  role?: string,
-  description?: string | React.ReactElement
-}
+import { ICard } from '../Card/Card.interface';
+
+export interface ITeamCard extends ICard {
+  title?: string
+  role?: string,
+  description?: string | React.ReactElement
+}

package/src/components/molecules/TeamCard/TeamCard.stories.tsx

@@ -1,33 +1,33 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ITeamCard } from './TeamCard.interface'
-import React from 'react'
-import TeamCard from './TeamCard.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/TeamCard',
-  component: TeamCard,
-  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<ITeamCard> = {
-  render: args => <TeamCard {...args} style={{ maxWidth: '220px' }}></TeamCard>,
-  args: {
-    role: 'Lorem ipsum',
-    title: 'Lorem ipsum',
-    imageElement: image,
-    description: 'Cras vel facilisis tellus'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ITeamCard } from './TeamCard.interface'
+import React from 'react'
+import TeamCard from './TeamCard.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/TeamCard',
+  component: TeamCard,
+  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<ITeamCard> = {
+  render: args => <TeamCard {...args} style={{ maxWidth: '220px' }}></TeamCard>,
+  args: {
+    role: 'Lorem ipsum',
+    title: 'Lorem ipsum',
+    imageElement: image,
+    description: 'Cras vel facilisis tellus'
+  }
+}

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

@@ -1,12 +1,12 @@
-import styled, { css } from 'styled-components';
-
-import Card from '../Card/Card.component';
-import { ITeamCard } from './TeamCard.interface';
-import { colors } from '@/styles/variables';
-
-export const StyledTeamCard = styled(Card) <ITeamCard>`
-  overflow: hidden;
-  margin-bottom: 24px;
-  pointer-events: none;
-`;
-
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { ITeamCard } from './TeamCard.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledTeamCard = styled(Card) <ITeamCard>`
+  overflow: hidden;
+  margin-bottom: 24px;
+  pointer-events: none;
+`;
+

package/src/components/molecules/TeamCard/index.ts

@@ -1 +1 @@
-export { default } from "./TeamCard.component";
+export { default } from "./TeamCard.component";

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

@@ -1,231 +1,231 @@
-import React, { useEffect, useRef, useState } from 'react'
-import {
-  StyledCircularSlider,
-  StyledCircularSliderContent,
-  StyledCircularSliderSlide,
-  StyledCircularSliderSlides,
-  StyledCircularSliderWrapper
-} from './CircularSlider.theme'
-
-import Heading from '@/components/atoms/Heading/Heading.component'
-import { ICircularSlider } from './CircularSlider.interface'
-import { debounce } from '@/helpers/events'
-import useMediaMatch from '@/helpers/useMediaMatch'
-
-const CircularSlider = ({
-  cta,
-  content,
-  style,
-  className
-}: ICircularSlider) => {
-  const [slideContent, setSlideContent] = useState({
-    name: content && content[0].name,
-    role: content && content[0].role
-  })
-  const slider = useRef<HTMLDivElement>()
-  const wrapper = useRef<HTMLDivElement>()
-  const svg = useRef<HTMLDivElement>()
-  const slidesHolder = useRef<HTMLDivElement>()
-  const contentHolder = useRef<HTMLDivElement>()
-
-  const isMobile = useMediaMatch()
-
-  //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 = isMobile ? -180 : -90
-
-    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 + 90) +
-          'deg )'
-        // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
-      }
-    }
-    const setSize = (radius: number) => {
-      if (!wrapper.current || !slidesHolder.current) return //bail out;
-
-      const slideSize = isMobile ? 0.12 : 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 = slidesHolder.current.style.height =
-        r + 'px'
-      slidesRepositioning(r / 2)
-
-      slidesSize = Math.min(
-        2 * radius * slideSize,
-        stepAngle * radius * (1 - slideSize) - 50
-      )
-
-      if (!isMobile) {
-        slidesHolder.current.style.marginTop = radius * slideSize + 'px'
-      } else {
-        wrapper.current.style.marginTop = -(r - slidesSize) + 'px'
-      }
-
-      for (let i = 0; i < slides.length; i++) {
-        slides[i].style.width = slides[i].style.height =
-          (isMobile ? slidesSize * 1.5 : slidesSize) + 'px'
-      }
-    }
-
-    const sliderResize = debounce(() => {
-      const sliderSize = isMobile ? 1.9 : 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
-
-      if (svg?.current)
-        svg.current.style.transform =
-          'translate(-50%, -50%) rotate( ' + currentAngle * 4 + 'deg )'
-      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)
-    }
-  }, [isMobile])
-
-  if (!content) return <></>
-
-  return (
-    <StyledCircularSlider
-      ref={slider as any}
-      className={className}
-      style={style}
-    >
-      <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="#FF4552"
-        />
-      </svg>
-      <StyledCircularSliderWrapper ref={wrapper as any}>
-        <StyledCircularSliderSlides ref={slidesHolder as any}>
-          {content?.map((item, index) => {
-            return (
-              <StyledCircularSliderSlide key={`slide-${index}`}>
-                {item.img}
-              </StyledCircularSliderSlide>
-            )
-          })}
-        </StyledCircularSliderSlides>
-      </StyledCircularSliderWrapper>
-      <StyledCircularSliderContent 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}
-      </StyledCircularSliderContent>
-    </StyledCircularSlider>
-  )
-}
-
-export default CircularSlider
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  StyledCircularSlider,
+  StyledCircularSliderContent,
+  StyledCircularSliderSlide,
+  StyledCircularSliderSlides,
+  StyledCircularSliderWrapper
+} from './CircularSlider.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component'
+import { ICircularSlider } from './CircularSlider.interface'
+import { debounce } from '@/helpers/events'
+import useMediaMatch from '@/helpers/useMediaMatch'
+
+const CircularSlider = ({
+  cta,
+  content,
+  style,
+  className
+}: ICircularSlider) => {
+  const [slideContent, setSlideContent] = useState({
+    name: content && content[0].name,
+    role: content && content[0].role
+  })
+  const slider = useRef<HTMLDivElement>()
+  const wrapper = useRef<HTMLDivElement>()
+  const svg = useRef<HTMLDivElement>()
+  const slidesHolder = useRef<HTMLDivElement>()
+  const contentHolder = useRef<HTMLDivElement>()
+
+  const isMobile = useMediaMatch()
+
+  //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 = isMobile ? -180 : -90
+
+    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 + 90) +
+          'deg )'
+        // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
+      }
+    }
+    const setSize = (radius: number) => {
+      if (!wrapper.current || !slidesHolder.current) return //bail out;
+
+      const slideSize = isMobile ? 0.12 : 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 = slidesHolder.current.style.height =
+        r + 'px'
+      slidesRepositioning(r / 2)
+
+      slidesSize = Math.min(
+        2 * radius * slideSize,
+        stepAngle * radius * (1 - slideSize) - 50
+      )
+
+      if (!isMobile) {
+        slidesHolder.current.style.marginTop = radius * slideSize + 'px'
+      } else {
+        wrapper.current.style.marginTop = -(r - slidesSize) + 'px'
+      }
+
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].style.width = slides[i].style.height =
+          (isMobile ? slidesSize * 1.5 : slidesSize) + 'px'
+      }
+    }
+
+    const sliderResize = debounce(() => {
+      const sliderSize = isMobile ? 1.9 : 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
+
+      if (svg?.current)
+        svg.current.style.transform =
+          'translate(-50%, -50%) rotate( ' + currentAngle * 4 + 'deg )'
+      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)
+    }
+  }, [isMobile])
+
+  if (!content) return <></>
+
+  return (
+    <StyledCircularSlider
+      ref={slider as any}
+      className={className}
+      style={style}
+    >
+      <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="#FF4552"
+        />
+      </svg>
+      <StyledCircularSliderWrapper ref={wrapper as any}>
+        <StyledCircularSliderSlides ref={slidesHolder as any}>
+          {content?.map((item, index) => {
+            return (
+              <StyledCircularSliderSlide key={`slide-${index}`}>
+                {item.img}
+              </StyledCircularSliderSlide>
+            )
+          })}
+        </StyledCircularSliderSlides>
+      </StyledCircularSliderWrapper>
+      <StyledCircularSliderContent 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}
+      </StyledCircularSliderContent>
+    </StyledCircularSlider>
+  )
+}
+
+export default CircularSlider