feat: update testimonials

src/components/sections/homepage/what-others-say/index.tsx

@@ -32,7 +32,7 @@ const WhatOthersSay = () => {
     const images = carouselRef.current?.querySelectorAll(
       '.carousel__item'
     ) as NodeListOf<HTMLDivElement>
-    const radius = 44 * vw
+    const radius = 40 * vw
     const progress = {
       value: 0
     }
@@ -101,9 +101,7 @@ const WhatOthersSay = () => {
                 className="carousel__item"
                 image={testimonial.image}
                 key={index}
-                logo={testimonial.logo}
                 name={testimonial.name}
-                position={testimonial.position}
               >
                 {testimonial.text}
               </Item>
@@ -121,9 +119,7 @@ const WhatOthersSay = () => {
               className="keen-slider__slide"
               image={testimonial.image}
               key={index}
-              logo={testimonial.logo}
               name={testimonial.name}
-              position={testimonial.position}
             >
               {testimonial.text}
             </Item>

src/components/sections/homepage/what-others-say/item/index.tsx

@@ -7,33 +7,19 @@ type ItemProps = {
   children: React.ReactNode
   className?: string
   image: string
-  logo: React.ReactNode
   name: string
-  position: string
 }
 
-const Item = ({
-  children,
-  className,
-  image,
-  logo,
-  name,
-  position
-}: ItemProps) => {
+const Item = ({ children, className, image, name }: ItemProps) => {
   return (
     <div className={clsx(s['item'], className)}>
       <div className={s['item__header']}>
         <div>
           <img src={image} alt={name} loading="lazy" />
           <div>
-            <p>
-              {name}
-              <br />
-              <span>{position}</span>
-            </p>
+            <p>{name}</p>
           </div>
         </div>
-        <div className={s['item__header__logo']}>{logo}</div>
       </div>
       <p>{children}</p>
     </div>

src/components/sections/homepage/what-others-say/item/item.module.scss

@@ -17,6 +17,7 @@
   left: 50%;
   transform: translate3d(0, 0, tovw(-10px));
   transform-origin: 50% 50%;
+  min-height: tovw(235px, 'default', 235px);
   z-index: 5;
   margin: tovw(-210px) 0 0 tovw(-210px);
   border: tovw(1.5px, 'default', 1px) solid var(--color-grey-light);
@@ -63,6 +64,8 @@
     width: tovw(48px, 'default', 48px);
     height: tovw(48px, 'default', 48px);
     overflow: hidden;
+    user-select: none;
+    pointer-events: none;
   }
 
   p {

src/components/sections/homepage/what-others-say/testimonials.tsx

@@ -2,87 +2,83 @@ import Square from '~/components/logos/square'
 
 export const testimonials = [
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1513509255302856718/I9DHE-BG_400x400.jpg',
+    name: '@rickmanelius',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: "If you love web3 infra layer tools/solutions, give @laconicnetwork a follow. I'm incredibly excited with what they have coming down the pipeline"
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1467983835627286529/eeb-wHtV_400x400.jpg',
+    name: '@kumavis',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: 'Running infura for free is actually extremely expensive, we pursued a light client before but it required a fresh implementation. hopefully @laconicnetwork solves this problem'
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1478264960581091330/I1PG8TSU_400x400.jpg',
+    name: '@OnChainDreamer',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: '@laconicnetwork > really smart ppl follows b4 launch'
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1510473579128893446/wkH_3gq3_400x400.jpg',
+    name: '@GarretteDVF',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: 'Will also need light clients. Gamer profiles will need some form of p2p gossip on their ranking over time, which makes a good case for composable state information (assuming games are settled on the chain). I would look to @laconicnetwork for some of that.'
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1502059383651549188/w1s1xEnA_400x400.jpg',
+    name: '@Lifechart3',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: 'Patiently waiting for @laconicnetwork Launch 😎'
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1513509255302856718/I9DHE-BG_400x400.jpg',
+    name: '@rickmanelius',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: "If you love web3 infra layer tools/solutions, give @laconicnetwork a follow. I'm incredibly excited with what they have coming down the pipeline"
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1467983835627286529/eeb-wHtV_400x400.jpg',
+    name: '@kumavis',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: 'Running infura for free is actually extremely expensive, we pursued a light client before but it required a fresh implementation. hopefully @laconicnetwork solves this problem'
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1478264960581091330/I1PG8TSU_400x400.jpg',
+    name: '@OnChainDreamer',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: '@laconicnetwork > really smart ppl follows b4 launch'
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1510473579128893446/wkH_3gq3_400x400.jpg',
+    name: '@GarretteDVF',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: 'Will also need light clients. Gamer profiles will need some form of p2p gossip on their ranking over time, which makes a good case for composable state information (assuming games are settled on the chain). I would look to @laconicnetwork for some of that.'
   },
   {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
+    image:
+      'https://pbs.twimg.com/profile_images/1502059383651549188/w1s1xEnA_400x400.jpg',
+    name: '@Lifechart3',
     position: 'CO-Founder',
     logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
-  },
-  {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
-    position: 'CO-Founder',
-    logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
-  },
-  {
-    image: '/images/testimonial-01.jpg',
-    name: 'JAYDON BATOR',
-    position: 'CO-Founder',
-    logo: <Square />,
-    text: 'We were looking to add in-app notifications to Quaestor when we came across Knock. Their well-documented APIs and composable React components made it super simple for us to get notifications up and running in minutes.'
+    text: 'Patiently waiting for @laconicnetwork Launch 😎'
   }
 ]