💄 (lp) Update wall of love
This commit is contained in:
@ -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" />
|
||||
}
|
||||
}
|
||||
|
@ -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'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'm using Typebot for everything when it's
|
||||
about talking with customers.
|
||||
<br />
|
||||
<br />
|
||||
What's amazing with Typebot is that it makes a "chat
|
||||
interface effect" 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'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>
|
||||
)
|
||||
|
Reference in New Issue
Block a user