feat: update testimonials

This commit is contained in:
Nazareno Oviedo 2022-04-13 14:27:42 -03:00
parent 7f52e81f0b
commit 5157ae68e2
4 changed files with 46 additions and 65 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 {

View File

@ -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 😎'
}
]