From eb4feb61bdbebf4632cba403b8a539147f41132e Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 6 Apr 2022 11:11:49 +0200
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E2=99=BF=EF=B8=8F=20Add=20more?=
 =?UTF-8?q?=20getting=20started=20videos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/GettingStartedModal.tsx | 50 ++++++++++++++++---
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/apps/builder/components/editor/GettingStartedModal.tsx b/apps/builder/components/editor/GettingStartedModal.tsx
index 78c6508f6..eeeda2cae 100644
--- a/apps/builder/components/editor/GettingStartedModal.tsx
+++ b/apps/builder/components/editor/GettingStartedModal.tsx
@@ -11,6 +11,12 @@ import {
   ListItem,
   ListIcon,
   Text,
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
 } from '@chakra-ui/react'
 import { CheckSquareIcon } from 'assets/icons'
 import { useRouter } from 'next/router'
@@ -37,27 +43,27 @@ export const GettingStartedModal = () => {
               <ListItem>
                 <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
                 The left side bar contains blocks that you can drag and drop to
-                the canva
+                the board.
               </ListItem>
               <ListItem>
                 <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
-                You can group blocks together by dragging them below or above
+                You can group blocks together by dropping them below or above
                 each other
               </ListItem>
               <ListItem>
                 <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
-                Don't forget to connect blocks together
+                Connect the groups together
               </ListItem>
               <ListItem>
                 <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
-                Preview your bot by clicking the preview button on the right
+                Preview your bot by clicking the preview button on the top right
               </ListItem>
             </List>
           </Stack>
 
           <Text>
-            Feel free to use the bottom-right bubble to contact if you have any
-            question 😃
+            Feel free to use the bottom-right bubble to reach out if you have
+            any question. I usually answer within the next 24 hours. 😃
           </Text>
           <Stack spacing={4}>
             <Heading fontSize="xl">See it in action ({`<`} 5 minutes)</Heading>
@@ -71,6 +77,38 @@ export const GettingStartedModal = () => {
               allowFullScreen
               style={{ borderRadius: '0.5rem' }}
             />
+            <Accordion allowToggle>
+              <AccordionItem>
+                <AccordionButton>
+                  <Box flex="1" textAlign="left">
+                    Other videos
+                  </Box>
+                  <AccordionIcon />
+                </AccordionButton>
+                <AccordionPanel py={10} as={Stack} spacing="10">
+                  <iframe
+                    width="100%"
+                    height="315"
+                    src="https://www.youtube.com/embed/6BudIC4GYNk"
+                    title="YouTube video player"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    style={{ borderRadius: '0.5rem' }}
+                  />
+                  <iframe
+                    width="100%"
+                    height="315"
+                    src="https://www.youtube.com/embed/ZuyDwFLRbfQ"
+                    title="YouTube video player"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    style={{ borderRadius: '0.5rem' }}
+                  />
+                </AccordionPanel>
+              </AccordionItem>
+            </Accordion>
           </Stack>
         </ModalBody>
       </ModalContent>