How to Build a $10,000 AI SaaS Landing Page – No Code Needed!

0:00 in this video we're going to be building 0:01 out this beautiful SAS landing page for 0:03 an AI email assistant tool and there's 0:05 even a working preview of the 0:07 application on the landing page that 0:09 allows you to enhance and improve your 0:10 emails using the gro API which is the 0:13 quickest API for getting responses from 0:15 open source llm models so if I just 0:18 write like a super lazy email right here 0:20 with a bunch of spell mistakes I can use 0:22 press on make it professional and it 0:23 will return an enhanced version of the 0:25 email with all of the spelling mistakes 0:27 corrected and you can even make it more 0:29 concise as well or even make it friendly 0:31 then we also have these beautiful 0:33 animations that we were able to 0:34 implement by using 21st Dev which is a 0:37 website which has a bunch of beautiful 0:39 components that you can add to lovable 0:40 and we even have a contact form for 0:42 Enterprise customers such that they can 0:44 fill their emails and send a message and 0:46 then we will receive an email with their 0:48 information and they will receive a 0:50 confirmation message using the recent 0:52 API and we will be making the website 0:54 mobile responsive as well and then also 0:56 deploying it on lovable launch hi in 0:58 this video we're going to be building a 1:00 landing page for an AI SAS product and 1:03 what I'm thinking is that we're going to 1:04 be building out something like this so 1:06 like an AI email writer essentially and 1:09 we're going to have this little feature 1:10 right here where you can write kind of 1:12 the description of an email that you 1:14 want to send and then it will kind of 1:16 enhance or write the email for you I 1:18 just bought this microphone that I want 1:22 to return and get my money back so we 1:26 have a bunch of spelling mistakes and 1:27 everything but this email yeah and here 1:30 we have like the enhanced version of the 1:31 email so this is essentially what we're 1:33 going to be building but we're going to 1:35 try to make the landing page as 1:36 beautiful as possible and for that we're 1:38 going to be using this website called 1:40 21st Dev which allows you to kind of 1:43 take these components and use them 1:45 within your own website and they have 1:47 support for lavable which is great so 1:50 let's just start off with the initial 1:51 prompts so let's just write something 1:52 like make SAS landing page for an AI 1:58 email ass assistant the landing page 2:01 should have hero section social proof 2:05 section and let's add a pricing table 2:09 with an price price plan that you just 2:14 has Conta form we also want a section 2:18 where we display the feature kind of 2:19 like we do right here but I'm just going 2:21 to send this as the initial prompt and 2:23 then for the theme I'm thinking that we 2:25 should have kind of a purple theme but I 2:27 wonder what lva B will choose for us cuz 2:30 some of the time lav do choose a kind of 2:32 nice purple kind of futuristic theme but 2:35 I think that will fit this kind of app 2:37 quite well so if lava ball does not do 2:39 that then I'm going to prompt it again 2:41 to do something like that all right so 2:44 here we have the first version yeah I I 2:46 think this looks pretty good we got the 2:48 purple theme as I was kind of thinking 2:50 about though I don't know it kind of 2:52 looks gray it could just be my monitor 2:54 oh actually it does look a bit gray it 2:56 does look a bit gray so what we can do 2:58 now is that we can actually just use the 2:59 select tool to see kind of how changing 3:02 the colors might just enhance this a 3:05 bits so we actually already have like a 3:06 primary color and a secondary color 3:08 right here and we can tell that these 3:09 ones are not as vibrant as some of these 3:13 colors so what I could do is that I 3:15 could use ask the AI to make the pur 3:18 purple a bit more purple so I'm just 3:21 going to send that and what we could do 3:23 once we have kind of found a theme which 3:25 looks good is that we can add it to the 3:27 custom knowledge tab right here we can 3:29 see see that it looks way better now now 3:31 we have a more vibrant vibrant purple so 3:33 I think this looks good let's see what 3:35 happens if you press sales so what we 3:37 want to have happen is that we want a 3:39 kind of flow to occur when we press that 3:41 button but let's continue working on 3:43 this landing page so some other things 3:46 that we might want to have is that we 3:49 may want to have kind of preview of what 3:52 the app does so for that I don't really 3:54 have any graphics or sketches what we 3:58 could do is that we could could go to 3:59 21st Dev and kind of see if we can find 4:02 any components that would fit the kind 4:04 of email theme that we're going for like 4:07 a lot of these are really really cool I 4:09 I think we need more spacing I think 4:10 spacing is an important part so I'm just 4:12 going to we could use the edit tool for 4:13 this but I'm actually just going to tell 4:14 the AI can we add some more spacing 4:18 let's just send that and we can also 4:19 while that's loading we can just take a 4:21 look at this page and see what they have 4:23 they also have a trusted bu so we can 4:25 add a trusted buy section and I actually 4:27 believe that 21st dev has a pretty good 4:30 example here okay here we have the 4:31 trusted bsection so I I have actually 4:34 tried using this in the past and I was 4:36 struggling but we can see if we can get 4:37 it to work right now and we will kind of 4:39 be be capping when we say that we're 4:41 trusted by these companies but but it's 4:43 all right only for you know educational 4:45 purposes do not try this within your own 4:48 SAS product trusted by section using the 4:52 animation Bob and yeah let's just send 4:56 that nice it seems like it added these 4:58 animations I'm quite sure I I don't 4:59 think those were there before but this 5:02 looks way better with the enhanced 5:04 vertical spacing I think so let's see 5:06 how how well the trusted section will 5:08 turn out now we can start work on the 5:11 kind of email thing before that we 5:13 probably want to connect super base 5:15 first before we even introduce the UI 5:17 and that's generally a better practice 5:19 within lovable to connect superbase 5:21 before you actually even write the UI 5:24 for the features which require a back 5:27 end because you will kind of have a mock 5:29 UI that doesn't really work and then you 5:31 will have to wire that up with the 5:33 backend and of course the lava ball will 5:34 be doing that work but it's just uh more 5:37 opportunities for lava B to get stuck so 5:39 we we is not going to do that but let's 5:42 see The Trusted buy section here we have 5:44 it it's not looking great out of the out 5:47 of the box so we will probably have to 5:49 have to make it look better one thing 5:50 that I noticed is that the animations 5:52 are not there so I'm going to make go on 5:54 the preview link like I just did but 5:56 they're still not there so what I'm 5:58 going to do is I'm just going to take 5:59 aen screenshot of them and then I'm 6:00 going to send this I'm going to write 6:03 something like the icons are too big and 6:06 the images to be icons of real companies 6:12 and we want the animations to work so 6:16 I'm just going to send that if we're 6:18 still struggling then we might actually 6:20 want to try to get into shat only mode 6:22 and shat with the lovable AI to actually 6:24 debug this issue but let's just send 6:27 that prompt and see what happens another 6:28 thing that I think would be cool is that 6:30 if you press the watch demo video then a 6:33 video is actually going to appear so 6:35 that actually works so for that I'm just 6:37 going to search up like like a video 6:39 let's just do never goingon to give you 6:42 up by Rick asley I think it will it will 6:45 improve this website funny enough the 6:47 wick Roll video is actually the default 6:49 video used when these llms add like a 6:52 video to a website it happens all the 6:55 time when you use AI tools but this 6:57 still doesn't look great so let me use 6:59 the the add this video make this video 7:02 appear when you press the watch demo 7:06 button and make it be like a pop up 7:10 there's actually a name for these popups 7:12 I'm quite sure it's called Model popup 7:13 so this is what they're called so we can 7:15 actually use this word and then we'll 7:17 also have to fix the icons yet again 7:19 over here I'm I'm pretty sure that it 7:22 should have included the company logos 7:24 but it might have not done that but we 7:27 can try just copying this kind of prompt 7:29 again so what the 21st Dev does is that 7:32 they essentially just have these custom 7:33 prompts for all of these websites and 7:36 they have kind of tried to I guess 7:38 figure out how lavable works and they 7:40 probably have like checked out the stack 7:42 that we use we use V and they have you 7:44 know created a prompt for our particular 7:47 stack and our prompts so let's just see 7:50 if this works so watch demo yeah this 7:52 works nice we we can probably make this 7:54 more beautiful but let's focus on the 7:56 icons again so can you please make The 8:00 Trusted section better use the 8:03 animations and use real company logos 8:07 now we can add some other things from 8:09 the 21st Dev websites for instance we 8:11 can add this beautiful Navar so screw it 8:15 let's just do that as well but let's see 8:17 if this actually resolves the 8:20 issue uh yes I saw an animation will I 8:23 see another one I don't see another one 8:26 logos should cycle using the animation 8:30 okay nice okay now the icons are cycling 8:33 it doesn't look great still I can't 8:36 actually name exactly what the issue is 8:38 it could be that they're all used the 8:40 same color which kind of looks boring 8:42 which is actually best practice so 8:44 that's totally fine but let's actually 8:46 just go back to this thing that we're 8:48 trying to add from 21st Dev here we have 8:50 it joining the cult so we can see that 8:53 they have different colors which I think 8:56 looks a bit better when you're switching 8:58 up the colors but what we could do is 9:00 that we could just like get these icons 9:02 ourselves can you add these these icons 9:06 okay I added some additional icons as 9:08 well and hopefully that should just 9:09 enhance it further this this does look 9:11 bad like the LinkedIn logo looks good 9:13 let me just do popular logos as you send 9:17 that I think those logos are going to 9:18 bring some more more color into this uh 9:21 section it seems like it's doing some 9:22 sort of warping or changing of the 9:24 images I believe it's transforming them 9:27 into like a path rather 9:29 than than an image which is not what we 9:32 want so let's make sure that this works 9:35 the way that we intend it to work right 9:37 now we can see that the images are not 9:38 being rendered so the images are not 9:41 being shown okay let's just send that 9:44 prompt it seems like we're we're kind of 9:45 messing up now further I don't know what 9:47 is going on it seems like all of the 9:48 three images are being rendered in the 9:51 same spot rather than like individually 9:53 let me try let me try this so I'm just 9:55 going to copy this again ASG then it's 9:59 becomes bad do not change the 10:03 svgs and for the images keep them as 10:07 images I don't know let's just try that 10:09 prompt see if it works okay well now now 10:13 it's looking decently well let's try to 10:17 get these icons in let's just give that 10:19 a try hopefully this works now now I'm 10:23 very like persistent in some of these 10:25 cases you could probably use move on and 10:28 like skip this part it's not super 10:30 important to use this specific animation 10:32 but I do think it looks nice so I will 10:35 try to get it to work yeah and now it 10:37 works this looks nice so yeah let's just 10:40 take companies biggest companies Nvidia 10:43 let's add Nvidia hopefully after that we 10:46 should be good now I I think this looks 10:48 kind of like sh as well so what I am 10:50 going to do is I'm going to take a 10:51 screenshot of this and let's just 10:53 enhance the text can you make make this 10:56 drel look a bit better let send this and 11:00 yeah this looks nice now okay I think 11:02 let's add a Navar now so we of course 11:06 this is just a landing page right now we 11:08 have made you know real SAS products 11:10 before but but we can still add this 11:12 Navar to navigate between the actual 11:14 sections rather than than like 11:16 navigating to different pages so let's 11:18 also just test this out so yeah this 11:20 looks a bit better but let's add this S 11:23 Bar so please take inspiration from this 11:27 nav bar and nav bar means navigation bar 11:30 but make it aligned with with our color 11:34 theme now as we can see we we get an 11:36 error so I'm just going to press on try 11:37 to fix and and this looks very bad I 11:39 must say and as you can tell it's taking 11:41 us to Pages which don't exist so let's 11:44 just take an image of the Navar and 11:47 let's specify that we want the Navar to 11:51 just navigate to the sections of the 11:56 landing page okay nice I think this 11:59 looks really good nice this is really 12:00 smooth I like it I think we just need to 12:03 add some spacing for that we could 12:04 actually use the edit tool I believe 12:06 what we want is that we want the margin 12:08 vertical margin but this is probably the 12:10 wrong way to do it so let's uh let's 12:13 select that and see if we can add some 12:14 margin like so yes I think that looks 12:18 good now another thing that we should do 12:20 is that we should try this on mobile 12:22 make sure that it's responsive and it is 12:25 it is indeed responsive which is super 12:27 nice you know out of the B all right 12:29 nice okay so what I think we should add 12:31 right now is that we should add the 12:33 actual preview functionality page or 12:36 section that we have over here so let's 12:39 connect super base for this and I'm 12:42 going to create a new superbase project 12:44 I'm actually going to have to remove one 12:45 of these old ones so I'm just going to 12:46 do that real quick let me now create a 12:49 new project let's call it AI email 12:53 assistant okay okay there we go let's 12:56 connect this up and let's remove move 12:59 confirm email address let me save this 13:02 and let's prepare this prompt so we want 13:06 to make it such that a user can user can 13:10 actually preview a part of the product 13:14 the part being the port being the 13:17 ability to write or enhance an email 13:21 let's have section dedicated for that 13:25 let's use grook API for this now I'm not 13:29 actually sure if this will work out of 13:31 the box because Gro is a kind of new 13:33 service and I'm not referring to x.com 13:36 I'm referring to dis gr which is a 13:38 company that does llm inference and they 13:41 they're actually very good at what they 13:43 do because their ships are used 13:45 extremely fast and quick so here it's 13:48 what is poly Pol normal function look 13:53 how quick it is it writes 1,200 tokens 13:56 per second which is pretty impressive 13:59 and that is why I think it would be cool 14:01 to have that within this product so what 14:03 I am going to do is I'm going to go over 14:05 chat only mode paste this in then I'm 14:06 going to ask are you aware of the gro 14:10 API now let's see if lavable actually 14:13 has the training data of the gro API 14:15 because if it does not then that is 14:18 going to make things a bit more 14:19 difficult but what we can do then is 14:21 that we can just copy paste some of the 14:23 API documentation into lavable I'll help 14:25 you plan out the new section for a 14:27 landing page that allows users to 14:28 preview the email enhancement feature 14:30 using Rock API yeah I mean it seems to 14:33 have knowledge of the rock API so I'm 14:35 just going to press Implement plan and 14:37 this plan looks very nice and it was 14:40 indeed what I was going for with the 14:42 kind of left and right areas so let's 14:45 just create this API key but let me just 14:48 add this key right there and also we 14:50 want to apply these changes so now I'm 14:52 doing a lot of things that once but I 14:54 think it's all right so we can see that 14:56 we have created a new table right here 14:58 and and it actually creates an index on 15:01 IP addresses and used ad for efficient 15:04 querying which is interesting so it's 15:06 kind of saving or fingerprinting the 15:08 user and fingerprinting is a cool term 15:11 used to identify users on the web and 15:13 the reason why we might want to do that 15:15 is because we want to count how many 15:16 users have went on the website and we 15:19 might want to limit them in terms of the 15:21 number of kind of yeah the number of 15:23 enhancements that they can do to their 15:25 emails but yeah this looks good let me 15:27 try this out so right an email to a 15:31 person that I want to sell my microphone 15:35 to it's a sh 7M something make it 15:40 concise concise email the guy is called 15:44 John and my name is Isaac but let's just 15:48 uh press make it more professional let's 15:50 see what happens so we actually get an 15:51 error we can open up the error log and 15:53 it says fail to call blah blah blah 15:56 status 500 I cannot read properties of 15:59 undefined reading zero so let's just 16:01 press try fix it okay I just had some 16:03 issues with the recording we were stuck 16:05 for a while but now we're back we have 16:07 essentially just finished making this 16:09 beautiful little section right here to 16:11 actually enhance this email so uh we can 16:14 make it more friendly we can make it 16:16 concise we can make like a general 16:18 Improvement of it and we can even edit 16:20 the text to the right such that the user 16:22 can like copy it and so on and you can 16:24 see all of my promps right here in the 16:25 chat history and you can just go onto 16:27 the this link right here I will link it 16:29 in the description and because this 16:31 project is is public I believe if it's 16:34 not I will just make it public it it is 16:36 public anyone can go over here and just 16:38 take a look at all of the prompts I've 16:39 sent now I'm working on this hero page 16:41 again so I added this little 21st Dev 16:45 background right here which I think 16:46 looks pretty cool but it's actually not 16:48 animating right now so I'm just going to 16:51 try to debug this so I'm going to tell 16:53 allowable the background is not 16:56 animating though please make it animate 17:00 then I'm just going to send the prompt 17:02 again now it could be one of those 17:03 preview issues where you have to open up 17:05 the preview URL but I don't believe that 17:08 to be the issue here now another thing 17:10 that we should probably add is a footer 17:11 so I'm just going to prepare the prompt 17:13 for that right now can you add a footer 17:16 the background is still not animating I 17:20 am not sure what the issue might be 17:23 let's try to figure figure it out and 17:28 what I will do now is that I'm going to 17:29 switch to shat only mode and then I'm 17:31 going to send this promps and maybe that 17:33 will solve it and hopefully we have the 17:34 yeah we have the footer right there and 17:36 the footer looks nice and then also we 17:38 have some spacing right here that 17:40 weren't there before that I think we 17:44 should remove so we'll have to prompt 17:46 that as well let's see let me analyze 17:48 the issue with the flickering grid 17:49 animation let's check how it's currently 17:51 being used in the hero section so it's 17:53 analyzing it let's press on Implement 17:56 plan and let's see if it works I'm just 17:58 going to send it this again and what we 18:00 can do if this still does not work is 18:02 that we can do a more kind of aggressive 18:05 prompt that tells lavable to kind of 18:07 start over and that may work so let's 18:10 give that a try let's try to try to 18:13 start over please just just use the code 18:17 right here now we're actually getting an 18:20 error so I'm just going to try to fix 18:22 and see if that resolves it without any 18:24 problem yeah there we have it and now 18:26 the the hero page is a bit smaller which 18:28 is what we wanted but let's try to let's 18:31 try this prompt out so let's just try 18:33 this use the code right here do not 18:36 change change it in any way let's try 18:39 that out okay nice can you now use the 18:42 component in the hero pitch now our 18:45 prompts are adding up here we are 18:47 prompting a lot but we we want to get 18:49 this get this right so that is what we 18:52 want now another thing that we should 18:54 add is that we should add a contact 18:55 sales thing and we should make that 18:57 actually work and for that we should use 18:59 resend which is an API that allows you 19:01 to send emails so essentially what we 19:03 want is that we want to receive an email 19:05 once a user has contacted us through the 19:09 contact sales button so okay let's see 19:11 if this now works we have updated the 19:13 flicker thing it still does not work 19:16 wait actually I think it is moving I 19:18 think I'm used I I actually think it is 19:19 moving the grid s is too small actually 19:22 I'm quite sure they are moving yeah they 19:24 are okay that's a bit Goofy on me 19:26 actually never mind I am sorry it is 19:29 working it is flickering but the squares 19:34 are not big enough for it to be 19:37 noticeable can you please pleas make 19:40 them bit bigger okay let's give this a 19:42 try yeah so that's of course important 19:44 to actually make sure that you have 19:46 properly evaluated what the issue might 19:49 be but yeah it seems like yeah it's 19:51 definitely they are definitely 19:52 flickering but yeah I'm quite certain 19:54 that yeah this is way more clear There's 19:56 Something About This which makes it 19:58 unclear it it might not be the size of 20:00 the squares it might be that the opacity 20:03 is lower or something nice now it might 20:06 be the size might but it's still not 20:10 that clear you maybe try to make them 20:13 more lack like increase contrast or 20:18 something okay there we go so now we 20:20 have something that is actually like 20:21 visible but we have to okay there we go 20:24 there we go now if I'm going to be 20:26 honest this doesn't look great now it's 20:28 this able but can you make the squares 20:32 small again and somehow make make them 20:36 more High rest make it look better let's 20:40 give it another try because there 20:42 there's definitely something something 20:43 strange here that is kind of ruining the 20:45 UI I mean even okay let's see yeah I 20:48 mean here we have like gray on Gray not 20:51 great for for kind of the the way the 20:54 look that we're going for kind of a bit 20:56 distracting okay this this looks better 20:58 this looks better 20:59 let's try to add some more margin okay 21:01 so so this is kind of the issue then 21:03 okay interesting so it seems like we 21:06 have this white overlay which is kind of 21:08 making it not that visible if we remove 21:11 this white overlay then it looks very 21:13 very ugly so what we should do is that 21:16 we should keep the white overlay and 21:18 maybe this is fine I think this looks 21:20 pretty cool I think this looks pretty 21:22 cool I think this looks fine let's add 21:24 let's add some more 21st de things to to 21:26 make this look even cooler so I think it 21:29 would be nice if we could add some some 21:33 kind of floating glare SL circles so if 21:37 you guys haven't seen some websites have 21:39 these like floating particles or circles 21:42 that look really cool so now he's going 21:43 to say nice now it looks good can we 21:46 maybe add a floating Circle purple 21:49 circle or similar to add some some 21:53 beauty to the website there we go there 21:56 we go this is like this is what I like 21:58 to see now now one note on this is that 22:02 I don't like the pattern that it's 22:04 animating in right now I don't like the 22:07 P that it's animating in right now and I 22:10 think this looks good so as you can see 22:12 we have the kind of purple things or 22:14 actually let's make the purple things 22:16 purple things a bit more clear let's 22:19 give this a try can we change I believe 22:21 we can nice what I would want to do is 22:24 that I would want to make it more bright 22:26 let's see okay maybe that was too bright 22:28 let's try this okay okay I think this is 22:30 fine I think this is good I think this 22:32 is pretty good another one which I think 22:34 would be pretty cool is to have this 22:36 animation right here so I'm just going 22:38 to copy this and I'm just going to say 22:40 can you please add this animation to the 22:43 euro page okay this doesn't look great 22:46 actually let's let's revert let's revert 22:48 not a fan restore actually can we just 22:52 use that animation on the 22:56 word and just anim 22:59 between 23:00 intelligence and assistance maybe let's 23:04 give that a try Okay this looks very 23:06 very bad let's be even more specific so 23:08 let me copy paste this old front and 23:10 let's go please use the animation and 23:13 methods above to update the hero page to 23:18 make the word animate from the cycle 23:22 between intelligence and 23:26 assistance now the last thing there 23:28 think we should add from 21st Dev is we 23:31 should add this thing right here I think 23:33 this would be very very cool so when you 23:35 scroll it kind of follows you and I I 23:37 think that's a pretty cool effect so I'm 23:39 just going to copy this as well and once 23:41 we have gotten this part to work and 23:42 there we go now it works perfect now 23:45 there is something about this animation 23:46 which which I think is is a bit off I 23:50 can't really tell what but let's try to 23:52 maybe we can have some motion blur or 23:53 something this might be fine but there 23:55 there is some UNS smoothness that I'm 23:57 seeing some St 23:58 now that could use be my Chrome or 24:00 something this does not look good make 24:03 it better can you add this timeline 24:07 thing you can choose choose what you can 24:11 choose what to on the timeline thing on 24:15 the landing page okay let's see now 24:18 let's see all right let's see if we get 24:21 it work now okay I like this I like this 24:24 it's it's not super super smooth 24:26 actually actually let me use r cuz this 24:29 doesn't look good could be the frame 24:30 rate actually can we maybe just increase 24:34 the frame rate let's try that add this 24:36 with to this but it's all right I think 24:39 this looks smoother now it kind of has 24:40 that bounce thing which which I like the 24:43 bounce is almost a bit too too too 24:46 aggressive but I think it's all right I 24:47 think this is fine let's send this and 24:49 let's add this timeline and then let's 24:51 make this contact form work so now let's 24:54 make the contact sales work okay let's 24:59 send that once we have this timeline 25:00 going all right so here we have the 25:02 timeline nice this looks good let's take 25:05 an image here and let's try to enhance 25:07 the taste and another thing that I think 25:09 would be good if we got some icons like 25:12 maybe 21st St can actually help us with 25:14 this nice now we have this thing above 25:16 okay perfect perfect perfect also this 25:19 animation right here is a bit broken 25:20 let's see if it's actually broken on the 25:22 preview page it is so let's just St 25:25 lovable about that yeah I mean what we 25:27 need is that we need some like this is 25:29 what we need this is exactly the stuff 25:32 we need I'm just going to try to 25:33 download some of these illustrations to 25:35 see if that can make this a bit more 25:37 beautiful it seems like this animation 25:39 is still still messing up a bit fix that 25:43 and also please add these images to the 25:47 timeline sections let's give that a try 25:51 and and then also what we could do is 25:52 that we can hook these up to stripe I'm 25:54 just going to skip that for now we can 25:56 look at our previous video on how to do 25:58 that at the end of the video I I showed 26:00 how to set up stripe but essentially 26:01 what you can do is you can just ask how 26:03 to set up stripe and then lavable will 26:05 give you all of the steps but let's see 26:07 if this works now yes so now we have the 26:09 images they're still still not looking 26:12 good because the text is like right 26:14 below the image which looks very weird 26:17 please can you fix this by not having 26:20 having the text be under the image but 26:24 having the text be to the side of the 26:28 image okay nice nice this looks way 26:31 better the the only thing is that we 26:32 probably want the image to like we 26:35 probably want the image to be part of 26:36 the the kind of block okay nice this 26:39 looks good this looks really good now I 26:40 think but not great Al for The Trusted 26:44 buy 26:45 section please update the color the text 26:50 let me stand that okay let's see okay 26:52 this looks better this looks better it 26:54 still looks bad though and I can't I 26:56 can't pinpoint why exactly it looks bad 26:58 it's still grade out maybe we have some 27:03 some white overlay above that we are not 27:08 a aware of so sometimes like sometimes 27:11 when you get an error like this which 27:12 seems simple but but we still have the 27:14 error it's probably something that we're 27:16 not aware of such as an overlay above it 27:18 so that is why I wrote wrote that prompt 27:21 and hopefully that should fix it and 27:22 then also we should fix this okay there 27:25 we go now the heading is clear perfect 27:27 so yeah the that kind of was the issue 27:29 but for some reason this doesn't look as 27:31 great right now okay let's see if we can 27:34 enhance this UI even more and and also 27:37 let's check the responsiveness so it is 27:39 indeed responsive though though it still 27:41 looks looks a bit strange then the the 27:45 look okay nice wow now we really updated 27:48 something okay this this looks nice I 27:50 like it but it is overflowing over here 27:53 so let's make sure that this not happen 27:55 and also maybe try to try to make the 27:59 text the blocks on the timeline okay 28:02 let's try that and let's see how it 28:04 looks on mobile nice it looks good on 28:06 mobile nice let's get it to match the 28:08 hero page cuz even though this kind of 28:10 gradient looks very cool I think it's 28:13 better to use match what we already have 28:16 and we could change every text to have 28:18 these kind of cool gradients but I'm not 28:19 going to do that nice okay I like this I 28:22 like this nice this looks really good I 28:24 think nice this looks really good but 28:27 can and we make it such that the 28:30 headings turn into purple when when we 28:34 are scrolling but other than that I 28:37 think we're good I think if we just pull 28:39 up the preview yeah this looks really 28:41 nice we have animations we have these 28:43 animations this is perfect now yeah this 28:46 text right here should match the color 28:48 that we already have let's let's edit 28:50 this text right here let's see if we can 28:52 make this more purple okay it seems like 28:54 we're not editing it let's discharge and 28:57 let's let's just copy this nice now can 29:00 you make this text the more Pur vibrant 29:04 purple primary color that we have I 29:07 think it's time to add a flow so I'm 29:09 just going to paste in this prompt right 29:11 here and I'm just going to send that and 29:12 it should create like one of these Edge 29:14 functions for us let me go to resend the 29:17 API that we will use for this and let me 29:20 create a new API key so create API key 29:23 let's go email AI assistant add let's 29:28 add this API key and I believe this 29:31 should work off the bat or actually let 29:33 me just try it out right now I think it 29:34 should work so let me just type 29:37 something in like Isaac let me type in 29:40 my email address and the lavable as the 29:44 company hello I would like to contact 29:49 you guys let's send this message and 29:51 let's see what happens there we go thank 29:52 you for your interest we'll be in touch 29:54 soon okay so now what we're looking for 29:56 is the confirmation message and yes 29:58 thank you for your interest Isaac and 30:00 then we also want the actual informative 30:03 message which we should have received 30:05 from from resent actually what we have 30:08 to say as well because right now we just 30:10 got the confirmation message we probably 30:13 want to also specify maybe we haven't 30:15 specified that I've implemented an edge 30:17 function that sends two emails to resend 30:19 a confirmation email to the user and a 30:20 notification email to your team okay so 30:22 the question is who who are we who are 30:24 we messaging onboarding res. so it's 30:28 seems like this is the is the email that 30:30 we're sending the email to which is 30:32 totally fine so here we have it new 30:34 sales inquiry so it seems like laal 30:37 automatically sent it to this like 30:39 recent email which seems to be one of 30:40 these emails that recent use to kind of 30:43 use test out things so we can see that 30:45 we have this message right here name 30:47 ISAC email ISAC Lev company and then we 30:50 have the message hello I would like to 30:52 contact you guys and I believe we can 30:53 change this email to any of our choosing 30:56 or to the email address that we have 30:58 signed up with I'm actually not sure if 31:00 we can choose any email address because 31:02 we might have to verify that within 31:03 reset but we can definitely tell it to 31:05 just send the the email about the sales 31:08 person to my own email which is ISAC 31:11 atable because I signed up to recent 31:14 using that email address all right but 31:16 that's it now we have this beautiful SAS 31:17 landing page right here for our 31:19 imaginary email AI assistant tool and we 31:22 even have this preview right here of the 31:24 tool and the preview Works using the gro 31:26 API and we have a bunch of these 21st 31:28 Dev components which really make the 31:30 website way more beautiful and we also 31:32 have the the contact sales button which 31:34 actually works and sends an email to us 31:37 and a confirmation email but we should 31:38 actually do one more thing so let's 31:40 actually publish this real quick so I'm 31:41 just going to press on update and this 31:43 will publish it to this domain right 31:45 here so let's just wait for this to load 31:47 all right there we have it and now we 31:48 can open up this domain and here we have 31:51 the website deployed and what we can do 31:53 now is that we can actually submit this 31:55 website to lavable Launch and if you 31:58 guys don't know about lavable launch it 32:00 is a recent kind of thing that we used 32:03 created which is a website kind of 32:05 similar to product where you can kind of 32:07 publish the things that you you built 32:09 with lovable so if you go over here I 32:12 can link this in the description you can 32:14 submit your lovable project and then you 32:16 can just press on submit project and we 32:17 can call this something let's call this 32:19 we have a name for it Nexus email so 32:22 let's just call this Nexus smart email 32:25 and it's essentially just the landing 32:26 page at this point but let me just go 32:29 through all of this so and then I'm just 32:30 going to press submit and there we go 32:32 here we have our project but now we have 32:35 our website on lavable launch and it 32:38 will the visibility of our website will 32:40 now be increased because people will be 32:42 able to go to lavable launch and you 32:44 check it out so yeah if you're launching 32:46 anything then you know I recommend going 32:48 to lavable launch and uploading it now 32:51 this is of course justed like a landing 32:52 page so we haven't really launched 32:55 anything other than use this landing 32:57 page but perhaps will get a bunch of 32:58 inbound and and then we might want to 33:00 build out this product to to make it 33:02 work but eitherway that was it for this 33:04 video we're going to be making a bunch 33:05 of more videos in the future but if you 33:07 have any feedback or questions you know 33:09 please just leave it in the comments 33:10 below and also you can join our Discord 33:13 server where we also answer questions 33:15 and kind of help out users and stuff but 33:17 yeah bye-bye