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

baptisteArno · Sep 7, 2023 · cdd3e19 · cdd3e19 · vercel · Sep 7, 2023
1 parent c6e55da
commit cdd3e19
Show file tree

Hide file tree

Showing 28 changed files with 49 additions and 52 deletions.
diff --git a/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx b/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"
           />

diff --git a/apps/landing-page/components/Homepage/EasyEmbed.tsx b/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"
           />

diff --git a/apps/landing-page/components/Homepage/Hero/BackgroundSpotlight.tsx b/apps/landing-page/components/Homepage/Hero/BackgroundSpotlight.tsx
diff --git a/apps/landing-page/components/Homepage/Hero/Hero.tsx b/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' }}

diff --git a/apps/landing-page/components/Homepage/Testimonials/Testimonial.tsx b/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"
           />
         ) : (

diff --git a/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx b/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,29 +87,29 @@ 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.',
     },
     {
       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,15 +184,15 @@ 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.',
     },
     {
       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! 😝",

diff --git a/apps/landing-page/components/common/SocialMetaTags.tsx b/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

diff --git a/apps/landing-page/pages/about.tsx b/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>
 

diff --git a/apps/landing-page/public/images/abhay.jpeg b/apps/landing-page/public/images/abhay.jpeg
diff --git a/apps/landing-page/public/images/annaFilou.jpeg b/apps/landing-page/public/images/annaFilou.jpeg
diff --git a/apps/landing-page/public/images/barretta.jpeg b/apps/landing-page/public/images/barretta.jpeg
diff --git a/apps/landing-page/public/images/builder-dnd.png b/apps/landing-page/public/images/builder-dnd.png
diff --git a/apps/landing-page/public/images/builder-screenshot.png b/apps/landing-page/public/images/builder-screenshot.png
diff --git a/apps/landing-page/public/images/favicon.png b/apps/landing-page/public/images/favicon.png
diff --git a/apps/landing-page/public/images/invictuz.png b/apps/landing-page/public/images/invictuz.png
diff --git a/apps/landing-page/public/images/joshua.jpg b/apps/landing-page/public/images/joshua.jpg
diff --git a/apps/landing-page/public/images/julien.jpeg b/apps/landing-page/public/images/julien.jpeg
diff --git a/apps/landing-page/public/images/kurnia.jpeg b/apps/landing-page/public/images/kurnia.jpeg
diff --git a/apps/landing-page/public/images/laszlo.jpeg b/apps/landing-page/public/images/laszlo.jpeg
diff --git a/apps/landing-page/public/images/lucas.png b/apps/landing-page/public/images/lucas.png
diff --git a/apps/landing-page/public/images/native-feeling.png b/apps/landing-page/public/images/native-feeling.png
diff --git a/apps/landing-page/public/images/nicolai.jpg b/apps/landing-page/public/images/nicolai.jpg
diff --git a/apps/landing-page/public/images/oscar.jpeg b/apps/landing-page/public/images/oscar.jpeg
diff --git a/apps/landing-page/public/images/preview.png b/apps/landing-page/public/images/preview.png
diff --git a/apps/landing-page/public/images/selfie.png b/apps/landing-page/public/images/selfie.png
diff --git a/apps/landing-page/public/images/steve.jpg b/apps/landing-page/public/images/steve.jpg
diff --git a/apps/landing-page/public/images/theo.jpeg b/apps/landing-page/public/images/theo.jpeg
diff --git a/apps/viewer/src/components/Seo.tsx b/apps/viewer/src/components/Seo.tsx
@@ -1,8 +1,9 @@
 import { gtmHeadSnippet } from '@/lib/google-tag-manager'
+import { Metadata } from '@typebot.io/schemas'
 import Head from 'next/head'
 import Script from 'next/script'
+import React from 'react'
 import { isNotEmpty } from '@typebot.io/lib'
-import { Metadata } from '@typebot.io/schemas/features/typebot/settings'
 
 type SEOProps = {
   url: string
@@ -22,7 +23,7 @@ export const SEO = ({
       <link
         rel="icon"
         type="image/png"
-        href={favIconUrl ?? 'https://s3.typebot.io/favicon.png'}
+        href={favIconUrl ?? 'https://viewer.typebot.io/favicon.png'}
       />
       <meta name="title" content={title ?? typebotName} />
       <meta