♻️ (lp) Add back static images into landing page

apps/landing-page/components/Homepage/EasyBuildingExperience.tsx

@@ -1,13 +1,7 @@
-import {
-  Flex,
-  Stack,
-  Heading,
-  Box,
-  Text,
-  Button,
-  Image,
-} from '@chakra-ui/react'
+import { Flex, Stack, Heading, Box, Text, Button } from '@chakra-ui/react'
 import React from 'react'
+import Image from 'next/image'
+import builderDndSrc from 'public/images/builder-dnd.png'
 import { ArrowRight } from 'assets/icons/ArrowRight'
 import { Flare } from 'assets/illustrations/Flare'
 import Link from 'next/link'
@@ -59,7 +53,7 @@ export const EasyBuildingExperience = () => {
         </Stack>
         <Box rounded="md" data-aos="fade">
           <Image
-            src="https://s3.typebot.io/builder-dnd.png"
+            src={builderDndSrc}
             alt="incomplete results illustration"
             placeholder="blur"
           />

apps/landing-page/components/Homepage/EasyEmbed.tsx

@@ -1,13 +1,7 @@
-import {
-  Flex,
-  Stack,
-  Heading,
-  Box,
-  Text,
-  Button,
-  Image,
-} from '@chakra-ui/react'
+import { Flex, Stack, Heading, Box, Text, Button } from '@chakra-ui/react'
 import React from 'react'
+import Image from 'next/image'
+import nativeFeelingSrc from 'public/images/native-feeling.png'
 import { ArrowRight } from 'assets/icons/ArrowRight'
 import { Flare } from 'assets/illustrations/Flare'
 import Link from 'next/link'
@@ -60,7 +54,7 @@ export const EasyEmbed = () => {
         </Stack>
         <Box rounded="md" data-aos="fade">
           <Image
-            src="https://s3.typebot.io/native-feeling.png"
+            src={nativeFeelingSrc}
             alt="incomplete results illustration"
             placeholder="blur"
           />

apps/landing-page/components/Homepage/Hero/BackgroundSpotlight.tsx

@@ -1,8 +0,0 @@
-import { Box, BoxProps, Image } from '@chakra-ui/react'
-import React from 'react'
-
-export const BackgroundSpotlight = (props: BoxProps) => (
-  <Box {...props}>
-    <Image src="https://s3.typebot.io/spotlight.png" alt="spotlight" />
-  </Box>
-)

apps/landing-page/components/Homepage/Hero/Hero.tsx

@@ -7,13 +7,14 @@ import {
   Stack,
   Text,
   VStack,
-  Image,
 } from '@chakra-ui/react'
 import * as React from 'react'
 import { Header } from '../../common/Header/Header'
 import { BackgroundPolygons } from './BackgroundPolygons'
 import * as Logos from './Brands'
 import Link from 'next/link'
+import Image from 'next/image'
+import builderScreenshotSrc from 'public/images/builder-screenshot.png'
 
 export const Hero = () => {
   return (
@@ -94,7 +95,7 @@ export const Hero = () => {
               data-aos-delay="800"
             >
               <Image
-                src="https://s3.typebot.io/builder.png"
+                src={builderScreenshotSrc}
                 alt="Builder screenshot"
                 placeholder="blur"
                 style={{ borderRadius: '10px' }}

apps/landing-page/components/Homepage/Testimonials/Testimonial.tsx

@@ -1,5 +1,6 @@
-import { Avatar, Flex, HStack, Stack, Text, Image } from '@chakra-ui/react'
+import { Avatar, Flex, HStack, Stack, Text } from '@chakra-ui/react'
 import * as React from 'react'
+import Image from 'next/image'
 import { TestimonialData } from './Testimonials'
 import {
   CapterraIcon,
@@ -31,8 +32,8 @@ export const Testimonial = ({
             src={avatarSrc}
             alt={name}
             placeholder="blur"
-            width="40px"
-            height="40px"
+            width={40}
+            height={40}
             className="rounded-full"
           />
         ) : (

apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx

@@ -1,10 +1,23 @@
 import { Flex, Heading, SimpleGrid, Stack, VStack } from '@chakra-ui/react'
 import * as React from 'react'
+import joshuaPictureSrc from 'public/images/joshua.jpg'
+import julienPictureSrc from 'public/images/julien.jpeg'
+import nicolaiPictureSrc from 'public/images/nicolai.jpg'
+import annaFilouPictureSrc from 'public/images/annaFilou.jpeg'
+import theoPictureSrc from 'public/images/theo.jpeg'
+import abhayPictureSrc from 'public/images/abhay.jpeg'
+import lucasPictureSrc from 'public/images/lucas.png'
+import oscarPictureSrc from 'public/images/oscar.jpeg'
+import invictuzPictureSrc from 'public/images/invictuz.png'
+import laszloPictureSrc from 'public/images/laszlo.jpeg'
+import kurniaPictureSrc from 'public/images/kurnia.jpeg'
+import stevePictureSrc from 'public/images/steve.jpg'
 import { Testimonial } from './Testimonial'
+import { StaticImageData } from 'next/image'
 
 export type TestimonialData = {
   name: string
-  avatarSrc?: string
+  avatarSrc?: StaticImageData
   provider: 'email' | 'productHunt' | 'capterra' | 'reddit'
   role?: string
   content: string | React.ReactNode
@@ -15,7 +28,7 @@ const testimonials: TestimonialData[][] = [
     {
       name: 'Joshua Lim',
       role: 'Growth Strategist @ Socialhackrs Media',
-      avatarSrc: 'https://s3.typebot.io/joshua.jpg',
+      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.',
@@ -24,7 +37,7 @@ const testimonials: TestimonialData[][] = [
       name: 'Laszlo Csömör',
       role: 'Digital Marketing Expert',
       provider: 'email',
-      avatarSrc: 'https://s3.typebot.io/laszlo.jpeg',
+      avatarSrc: laszloPictureSrc,
       content: (
         <>
           Typebot is one of the best chatbot builders with its intelligent
@@ -40,7 +53,6 @@ const testimonials: TestimonialData[][] = [
       name: 'Mario Barretta',
       role: 'Customer Care Manager',
       provider: 'email',
-      avatarSrc: 'https://s3.typebot.io/barretta.jpeg',
       content: (
         <>
           Thanks to typebot I can finally make site forms much more modern and I
@@ -57,7 +69,7 @@ const testimonials: TestimonialData[][] = [
     {
       name: 'Lucas Barp',
       provider: 'email',
-      avatarSrc: 'https://s3.typebot.io/lucas.png',
+      avatarSrc: lucasPictureSrc,
       role: 'Founder at Barp Digital',
       content:
         'The result of your work is incredible and can make life easier for many people.',
@@ -75,14 +87,14 @@ const testimonials: TestimonialData[][] = [
       name: 'Oscar',
       role: 'CEO',
       provider: 'capterra',
-      avatarSrc: 'https://s3.typebot.io/oscar.jpeg',
+      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: 'Julien Muratot',
       role: 'Growth Manager @ Hornetwork',
-      avatarSrc: 'https://s3.typebot.io/julien.jpeg',
+      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.',
@@ -90,14 +102,14 @@ const testimonials: TestimonialData[][] = [
     {
       name: '_Invictuz',
       provider: 'reddit',
-      avatarSrc: 'https://s3.typebot.io/invictuz.png',
+      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: 'Theo Marechal',
       provider: 'productHunt',
-      avatarSrc: 'https://s3.typebot.io/theo.jpeg',
+      avatarSrc: theoPictureSrc,
       role: 'Nocode expert and content creator',
       content: (
         <>
@@ -114,7 +126,7 @@ const testimonials: TestimonialData[][] = [
     {
       name: 'Abhay Kulkarni',
       provider: 'productHunt',
-      avatarSrc: 'https://s3.typebot.io/abhay.jpeg',
+      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 :)',
@@ -124,7 +136,7 @@ const testimonials: TestimonialData[][] = [
     {
       name: 'Steve de Jong',
       provider: 'email',
-      avatarSrc: 'https://s3.typebot.io/steve.jpg',
+      avatarSrc: stevePictureSrc,
       role: 'CEO at Stillio',
       content: (
         <>
@@ -159,7 +171,7 @@ const testimonials: TestimonialData[][] = [
       name: 'Kurnia Kwik',
       role: 'Founder at DigitalPointer.ID',
       provider: 'email',
-      avatarSrc: 'https://s3.typebot.io/kurnia.jpeg',
+      avatarSrc: kurniaPictureSrc,
       content: (
         <>
           I have several chatbot builders, but Typebot is the one I use the
@@ -172,7 +184,7 @@ const testimonials: TestimonialData[][] = [
     {
       name: 'Nicolai Grut',
       role: 'CEO @ EcommerceNotebook.com',
-      avatarSrc: 'https://s3.typebot.io/nicolai.jpg',
+      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.',
@@ -180,7 +192,7 @@ const testimonials: TestimonialData[][] = [
     {
       name: 'Anna Filou',
       provider: 'productHunt',
-      avatarSrc: 'https://s3.typebot.io/annaFilou.jpeg',
+      avatarSrc: annaFilouPictureSrc,
       role: 'Geek, Designer, Illustrator, Web Dev',
       content:
         "Seems like the product I've been waiting for Typeform to make! 😝",

apps/landing-page/components/common/SocialMetaTags.tsx

@@ -5,7 +5,7 @@ export const SocialMetaTags = ({
   title = 'Typebot - Open-source conversational apps builder',
   description = 'Powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.',
   currentUrl,
-  imagePreviewUrl = 'https://s3.typebot.io/preview.png',
+  imagePreviewUrl = 'https://home.typebot.io/images/preview.png',
 }: {
   title?: string
   description?: string

apps/landing-page/pages/about.tsx

@@ -1,7 +1,9 @@
-import { Stack, Text, Box, Flex, Heading, Image } from '@chakra-ui/react'
+import { Stack, Text, Box, Flex, Heading } from '@chakra-ui/react'
 import { Header } from 'components/common/Header/Header'
 import { SocialMetaTags } from 'components/common/SocialMetaTags'
 import React from 'react'
+import selfie from '../public/images/selfie.png'
+import Image from 'next/image'
 import { Footer } from 'components/common/Footer'
 import { TextLink } from 'components/common/TextLink'
 
@@ -28,7 +30,7 @@ const AboutPage = () => {
         </Text>
         <Flex w="full" justify="center">
           <Box as="figure" maxW="200px">
-            <Image src="https://s3.typebot.io/selfie.png" alt="selfie" />
+            <Image src={selfie} alt="selfie" />
           </Box>
         </Flex>