From 5157ae68e2594accbbb989578612f32f726ae301 Mon Sep 17 00:00:00 2001 From: Nazareno Oviedo Date: Wed, 13 Apr 2022 14:27:42 -0300 Subject: [PATCH] feat: update testimonials --- .../homepage/what-others-say/index.tsx | 6 +- .../homepage/what-others-say/item/index.tsx | 18 +--- .../what-others-say/item/item.module.scss | 3 + .../homepage/what-others-say/testimonials.tsx | 84 +++++++++---------- 4 files changed, 46 insertions(+), 65 deletions(-) diff --git a/src/components/sections/homepage/what-others-say/index.tsx b/src/components/sections/homepage/what-others-say/index.tsx index 2d1f34e..7ca203a 100644 --- a/src/components/sections/homepage/what-others-say/index.tsx +++ b/src/components/sections/homepage/what-others-say/index.tsx @@ -32,7 +32,7 @@ const WhatOthersSay = () => { const images = carouselRef.current?.querySelectorAll( '.carousel__item' ) as NodeListOf - 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} @@ -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} diff --git a/src/components/sections/homepage/what-others-say/item/index.tsx b/src/components/sections/homepage/what-others-say/item/index.tsx index 5f15976..8b51a7a 100644 --- a/src/components/sections/homepage/what-others-say/item/index.tsx +++ b/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 (
{name}
-

- {name} -
- {position} -

+

{name}

-
{logo}

{children}

diff --git a/src/components/sections/homepage/what-others-say/item/item.module.scss b/src/components/sections/homepage/what-others-say/item/item.module.scss index f79f30b..2ad527b 100644 --- a/src/components/sections/homepage/what-others-say/item/item.module.scss +++ b/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 { diff --git a/src/components/sections/homepage/what-others-say/testimonials.tsx b/src/components/sections/homepage/what-others-say/testimonials.tsx index d1a1f55..9cd5153 100644 --- a/src/components/sections/homepage/what-others-say/testimonials.tsx +++ b/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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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 😎' } ]