2
0

💄 (lp) Update wall of love

This commit is contained in:
Baptiste Arnaud
2022-12-02 10:53:53 +01:00
parent 41149b07c6
commit bdf7c0d5c0
16 changed files with 407 additions and 188 deletions

View File

@ -1,46 +1,46 @@
import { Box, Flex, HStack, Stack, Text } from '@chakra-ui/react'
import { Avatar, Flex, HStack, Stack, Text } from '@chakra-ui/react'
import * as React from 'react'
import Image, { StaticImageData } from 'next/image'
import { QuoteLeftIcon } from 'assets/icons/QuoteLeftIcon'
import Image from 'next/image'
import { TestimonialData } from './Testimonials'
import {
CapterraIcon,
EmailIcon,
ProductHuntIcon,
RedditIcon,
} from 'assets/icons'
interface TestimonialProps {
image: StaticImageData
name: string
role: string
children: React.ReactNode
}
export const Testimonial = (props: TestimonialProps) => {
const { image, name, role, children } = props
return (
<Flex
flexDir="column"
justify="space-between"
as="blockquote"
p="6"
rounded="lg"
bgColor="gray.800"
color="white"
shadow="lg"
{...props}
>
<Stack>
<QuoteLeftIcon boxSize="25px" />
<Text mt="3" fontSize="xl" maxW="38rem" color="gray.400">
{children}
</Text>
</Stack>
<HStack mt="6" spacing="4">
<Image
src={image}
alt={name}
placeholder="blur"
width={80}
height={80}
className="rounded-full"
/>
<Box>
export const Testimonial = ({
avatarSrc,
content,
name,
role,
provider,
}: TestimonialData) => (
<Stack
p="6"
rounded="lg"
bgColor="gray.800"
color="white"
shadow="lg"
spacing="4"
data-aos="fade"
data-aos-delay="500"
>
<Flex justifyContent="space-between">
<HStack spacing="4">
{avatarSrc ? (
<Image
src={avatarSrc}
alt={name}
placeholder="blur"
width={40}
height={40}
className="rounded-full"
/>
) : (
<Avatar name={name} />
)}
<Stack spacing={1}>
<Text
as="cite"
fontStyle="normal"
@ -52,8 +52,30 @@ export const Testimonial = (props: TestimonialProps) => {
<Text fontSize="sm" color={'gray.100'}>
{role}
</Text>
</Box>
</Stack>
</HStack>
<ProviderIcon provider={provider} />
</Flex>
)
<Text mt="3" maxW="38rem" color="gray.400">
{content}
</Text>
</Stack>
)
const ProviderIcon = ({
provider,
}: {
provider: TestimonialData['provider']
}): JSX.Element => {
switch (provider) {
case 'email':
return <EmailIcon fontSize="20px" />
case 'productHunt':
return <ProductHuntIcon fontSize="20px" />
case 'capterra':
return <CapterraIcon fontSize="20px" />
case 'reddit':
return <RedditIcon fontSize="20px" />
}
}

View File

@ -1,67 +1,168 @@
import { chakra, Flex, Heading, Stack, VStack } from '@chakra-ui/react'
import { Flex, Heading, SimpleGrid, Stack, VStack } from '@chakra-ui/react'
import * as React from 'react'
import joshuaPictureSrc from 'public/images/homepage/joshua.jpg'
import julienPictureSrc from 'public/images/homepage/julien.jpeg'
import nicolaiPictureSrc from 'public/images/homepage/nicolai.jpg'
import annaFilouPictureSrc from 'public/images/homepage/annaFilou.jpeg'
import theoPictureSrc from 'public/images/homepage/theo.jpeg'
import abhayPictureSrc from 'public/images/homepage/abhay.jpeg'
import lucasPictureSrc from 'public/images/homepage/lucas.png'
import oscarPictureSrc from 'public/images/homepage/oscar.jpeg'
import invictuzPictureSrc from 'public/images/homepage/invictuz.png'
import laszloPictureSrc from 'public/images/homepage/laszlo.jpeg'
import { Testimonial } from './Testimonial'
import { StaticImageData } from 'next/image'
export type TestimonialData = {
name: string
avatarSrc?: StaticImageData
provider: 'email' | 'productHunt' | 'capterra' | 'reddit'
role?: string
content: string | React.ReactNode
}
const testimonials: TestimonialData[][] = [
[
{
name: 'Joshua Lim',
role: 'Growth Strategist @ Socialhackrs Media',
avatarSrc: joshuaPictureSrc,
provider: 'email',
content:
'I upgraded my typeforms to typebots and saw a conversion rate increase from 14% to 43% on my marketing campaigns. I noticed the improvement on day one. That was a game-changer.',
},
{
name: 'Laszlo Csömör',
role: 'Digital Marketing Expert',
provider: 'email',
avatarSrc: laszloPictureSrc,
content: (
<>
Typebot is one of the best chatbot builders with its intelligent
features and drag-and-drop simplicity. Its UI/UX is an earthly
paradise...
<br />
What&apos;s even more important is the person who stands behind it. He
guarantees that the platform will work and progress for a long time.
</>
),
},
{
name: 'Theo Marechal',
provider: 'productHunt',
avatarSrc: theoPictureSrc,
role: 'Nocode expert and content creator',
content: (
<>
Amazing product! I&apos;m using Typebot for everything when it&apos;s
about talking with customers.
<br />
<br />
What&apos;s amazing with Typebot is that it makes a &quot;chat
interface effect&quot; without the hassle of being behind my computer
all day responding to customers. Highly recommend !
</>
),
},
{
name: 'Nicolai Grut',
role: 'CEO @ EcommerceNotebook.com',
avatarSrc: nicolaiPictureSrc,
provider: 'email',
content:
'I am really loving using Typebot! So good. I have used all the top bots and yours is definitely the most user friendly, and yet still so powerful.',
},
],
[
{
name: 'Oscar',
role: 'CEO',
provider: 'capterra',
avatarSrc: oscarPictureSrc,
content:
'Within 5 minutes of signing up you can already have your bot running thanks to the templates it comes with. I have used many tools to make bots but none as simple, easy and powerful as Typebot.',
},
{
name: '_Invictuz',
provider: 'reddit',
avatarSrc: invictuzPictureSrc,
content:
"This is the sickest open-source project I've ever seen and demoed. The use case is so cool and modern and I can't believe how easy this is to get started using. The feature richness and polish in this project is incredible, it feel like a mature product. Unbelievable that this was built by one person. This is better than the demos of chatbot builders I've seen from full-fledged companies. I'm going to learn Typescript so that I can contribute to this someday. Mind-blowing stuff...",
},
{
name: 'Abhay Kulkarni',
provider: 'productHunt',
avatarSrc: abhayPictureSrc,
role: 'Founder at Webisharp',
content:
'Using this tool for the last 2 hours & built a full lead capture bot. Pretty good experience till now. @baptiste_arnaud All the best for future :)',
},
{
name: 'Lucas Barp',
provider: 'email',
avatarSrc: lucasPictureSrc,
role: 'Founder at Barp Digital',
content:
'The result of your work is incredible and can make life easier for many people.',
},
],
[
{
name: 'Goran Milic',
role: 'General Manager, Beefii',
provider: 'email',
content: (
<>
I used Typebot at my company and was impressed with how it cut our
customer service workload in half. I was able to create a fully
functional chatbot in minutes. <br /> You can create a bot to answer
frequently asked questions about your business or create a bot that
helps promote your business on social media or any other platform.,
</>
),
},
{
name: 'Julien Muratot',
role: 'Growth Manager @ Hornetwork',
avatarSrc: julienPictureSrc,
provider: 'email',
content:
'I run Google ads all year long on our landing page that contains a typebot. I saw a 2x increase on our conversation rate compared to our old WordPress form.',
},
{
name: 'Igor T.',
role: 'CTO',
provider: 'capterra',
content:
'Nice work. The developer promptly makes changes, which is quite rare. There was a suggestion for improvement and improvement, in 2 days it was implemented. Amazing! Good luck and thanks a lot',
},
{
name: 'Anna Filou',
provider: 'productHunt',
avatarSrc: annaFilouPictureSrc,
role: 'Geek, Designer, Illustrator, Web Dev',
content:
"Seems like the product I've been waiting for Typeform to make! 😝",
},
],
]
export const Testimonials = () => {
return (
<Flex as="section" justify="center">
<VStack spacing={12} pt={'52'} px="4">
<VStack spacing={12} pt={'52'} px="4" maxW="1400px">
<Heading textAlign={'center'} data-aos="fade">
They&apos;ve tried, they never looked back. 💙
</Heading>
<Stack
direction={{ base: 'column', xl: 'row' }}
spacing="10"
maxW="1200px"
>
<Testimonial
name="Joshua Lim"
role="Growth Strategist @ Socialhackrs Media"
image={joshuaPictureSrc}
data-aos="fade"
>
I upgraded my typeforms to typebots and saw a conversion rate
increase{' '}
<chakra.span fontWeight="bold" color="orange.300">
from 14% to 43%
</chakra.span>{' '}
on my marketing campaigns. I noticed the improvement on day one.
That was a game-changer.
</Testimonial>
<Testimonial
name="Nicolai Grut"
role="CEO @ EcommerceNotebook.com"
image={nicolaiPictureSrc}
data-aos="fade"
>
I am really loving using Typebot! So good. I have used all the top
bots and yours is definitely the{' '}
<chakra.span fontWeight="bold" color="orange.300">
most user friendly
</chakra.span>
, and yet still so{' '}
<chakra.span fontWeight="bold" color="orange.300">
powerful
</chakra.span>
.
</Testimonial>
<Testimonial
name="Julien Muratot"
role="Growth Manager @ Hornetwork"
image={julienPictureSrc}
data-aos="fade"
>
I run Google ads all year long on our landing page that contains a
typebot. I saw a{' '}
<chakra.span fontWeight="bold" color="orange.300">
2x increase
</chakra.span>{' '}
on our conversation rate compared to our old WordPress form.
</Testimonial>
</Stack>
<SimpleGrid columns={[1, 2, 3]} spacing="6">
{testimonials.map((testimonialGroup, index) => (
<Stack key={index} spacing="6">
{testimonialGroup.map((testimonial, index) => (
<Testimonial key={index} {...testimonial} />
))}
</Stack>
))}
</SimpleGrid>
</VStack>
</Flex>
)