Vibe Coding my Entire Landing Page with AI (Lovable):

0:00 in this video I'm going to be building a 0:01 landing page by Vibe coding whatever the 0:04 hell that is in all seriousness I'll be 0:05 making a landing page for my newsletter 0:07 using lovable along with that I'll be 0:09 adding AI automations on the back end to 0:11 capture emails and add them to my email 0:13 marketing campaign using zapier if we 0:15 haven't met yet my name is Brock 0:17 messerich and this channel is AI for 0:18 non- techies I'm not a developer but I 0:20 build some pretty cool things with AI 0:22 and show you how to do the same so 0:24 without further Ado let's dive in and do 0:25 this I'm going to go through I'm 0:26 actually going to choose a template I'm 0:28 going to edit it I'm gonna add my own 0:29 spins using lovable so let's go ahead 0:31 and dive into this now also I want to 0:33 mention I'm going to be adding AI 0:34 automations on the back end of this to 0:36 actually capture the email send an email 0:38 that is customized to this person as 0:40 well as add them to our email marketing 0:42 software using zapier so make sure to 0:44 stick to the end to see me do that but 0:46 let's go ahead and let's build this out 0:48 I was playing around with the platform 0:50 and I absolutely love this landing page 0:52 that somebody actually made so shout out 0:55 to rul KF Arif I don't know how to say 0:58 her name I butchered it but he's the one 0:59 that built this I'm going to be using 1:00 this as a template and adding my own 1:02 spins on top of this in order to create 1:04 my newsletter landing page so what I'm 1:06 going to do is I'm going to come around 1:08 let's just take a look at this I think 1:09 this looks super smooth there's a lot of 1:11 this that we could just easily edit out 1:13 using the edits feature and we're going 1:15 to basically use lovable to make it our 1:17 own so let's click on remix I'm going to 1:20 remix this now okay here we go so this 1:22 is obviously the landing page the exact 1:23 landing page from the template that we 1:25 got we need to now we need to now change 1:27 this and make this our own so let's just 1:29 say let's customize this to a newsletter 1:32 called AI for non teis keep the layout 1:38 the exact same just change the copy so 1:41 it's custom to us okay so let's give it 1:44 that it's now going to begin making some 1:46 changes and then I'll go through using 1:48 the edits feature and just basically 1:49 edit um all the things that aren't 1:51 customized using AI so let's give it a 1:54 second and let see what it gives us all 1:55 right so it looks like our landing page 1:57 has slightly been modified to a turn on 2:00 techy so let's take a look and see what 2:02 has changed we still have this logo up 2:04 here for pulse robot so we need to go 2:06 ahead and I'm going to edit that and 2:07 change it so all I need to do is click 2:09 on edit I could select this here and I 2:10 could literally change this to my own 2:12 logo or image right here but I'm just 2:14 going to delete it CU I don't need it 2:15 there as well as I'm going to delete 2:17 this whole header because I don't need 2:19 the topics home and like I don't need 2:22 all that stuff so we're going to make 2:23 this newsletter pretty simple or this 2:26 landing page pretty simple so here we go 2:27 we change this to newsletter let's just 2:29 delete this cuz I don't need number one 2:31 let's make sure to save all of our 2:33 changes all right so here we go we got 2:35 newsletter we got AI for non tees 2:37 demystifying AI um I like this however 2:40 let's go ahead and make some changes to 2:42 the copy here let's change it and 2:44 customize it to our own so I'm going to 2:46 click on this and basically prompt the 2:47 AI and like Chang it so let's change 2:50 this text to say AI for non techies Made 2:55 Simple so AI for non techies Made Simple 2:57 I think that's just a better slogan 2:59 there so let's just click that and so it 3:00 should now make this change as well as 3:02 let's make a change to our subtext there 3:04 as well all right so now we got AI for 3:05 non- tiies Made Simple let's move down 3:07 and see what we want to change so let's 3:09 play around with this subscribe now okay 3:11 so humanoid so why humanoid we obviously 3:13 need to change this so let's just click 3:15 here I'm going to delete this I need to 3:17 make sure to save after each of these 3:18 edits all right so weekly AI updates in 3:21 one place and let's just change this to 3:23 your one stop for all AI updates and 3:26 then I really love what they did with 3:28 this section right here so I think we 3:30 could add some pretty cool things to 3:31 these cards in order to customize it and 3:33 make it our own so let's go ahead and do 3:35 that now all right I decided to change 3:36 this to weekly AI updates and use cases 3:39 I think that sounds just a little bit 3:40 better all right so every week thousands 3:42 of AI tools come out we simplify the 3:44 ones that truly matter and let's go to 3:46 the next one and change the text here 3:48 showcasing the most practical ways to 3:50 implement AI into your daily life Al 3:52 looks great and then let's go ahead and 3:55 okay for whatever reason it's not 3:56 allowing me to edit this white text here 3:58 so I might need delete this I'm going to 4:00 have to delete this whole entire div 4:02 which is essentially this big card here 4:04 so I'm going to delete this real 4:08 quick I'm just going to prompt our AI 4:10 now to now add some texture so let's add 4:13 text to this div all right I'm going to 4:14 give it that I said let's add text to 4:16 this div make it say explain for 4:17 non-technical people even your parents 4:19 can understand it let's see if it's able 4:21 to identify and make it look basically 4:23 exactly like this I wonder if it'll be 4:24 able to figure that out I know if some 4:26 of you guys have seen my previous videos 4:27 on lovable I actually build software 4:29 using Ai and this is a bit simpler to do 4:31 for this use case of this video building 4:33 on the landing page and using a template 4:34 to do it but I want to showcase the 4:36 edits feature and how easy it is to 4:37 actually make edits inside of lovable so 4:39 I hope you guys are seeing value for 4:41 that sake boom okay it understood that 4:43 that's perfect explain for nontechnical 4:45 people even your parents can understand 4:46 it so we now have those three cards here 4:48 I think that looks really good and let's 4:50 move on here let's we're going to have 4:52 to go ahead and change this so I'm going 4:53 to come back over to the edit feature 4:55 let's delete this again so I changed 4:57 this to adopt or get left behind and 4:59 let's go ahead and change this textt now 5:01 I like this gradient text I'm really 5:03 happy with the template I chose cuz I 5:04 think it just looks super clean I'll 5:06 actually use this for my newsletter so 5:07 I'm going to select this text here and 5:09 I'm actually going to prompt lovable to 5:10 come up with some copy for me so I don't 5:12 have to brainstorm this myself all right 5:14 so I think that looks good we believe 5:15 nobody should be left behind when it 5:17 comes to adopting AI our mission is 5:18 demystify artificial intelligence 5:20 concept so everyone regardless of 5:22 technical background can harness its 5:24 potential in their daily lives and work 5:26 I'm going to say that's a little long 5:27 let's shorten it slightly all right I 5:30 think that's much better nobody should 5:31 be left behind in AI Revolution we're 5:33 here to make artificial intelligence 5:34 accessible to everyone regardless of 5:36 technical background so that looks great 5:38 I think that's awesome next up what are 5:39 we going to change here so I'm going to 5:42 just delete this I don't think we need 5:44 this in our landing page so let's delete 5:46 that as well as this let's delete this 5:49 just delete the whole section as well as 5:51 testimonials we won't include that I'm 5:53 also going to delete this because I want 5:55 to just use the text box that I have 5:56 below so we'll use this as our actual 5:58 call to action for our landing page 6:00 let's just delete this entire section 6:03 here delete 6:08 delete all right there we go so I think 6:10 this is how we want this to look we want 6:11 our initial hero here so we have ai for 6:14 non techys Made Simple we have our 6:15 weekly AI updates and use cases with 6:18 this I think that looks super smooth and 6:19 clean um adopter get left behind I love 6:22 how this looks here as well as we have 6:24 our subscribe call to action right there 6:27 as well as this so let me make a change 6:29 right here let's just say let's first of 6:31 all delete this image there so it 6:33 doesn't have the branding let's save 6:34 that and I want to add this so this text 6:36 is in the middle here so let's just say 6:38 move this text to the middle of the 6:41 parent div so the parent div is 6:43 essentially this because it's inside of 6:46 that so let's click on this boom there 6:48 we go okay so now that looks great next 6:50 up what we need to do we actually need 6:51 to add functionality for this so we need 6:53 to actually enable when a user signs up 6:56 it actually sends a web hook to zapier 6:58 in order to send their email and store 7:01 it so we could actually add that to our 7:03 email marketing software so let's go 7:05 ahead and test if this works right now 7:06 so let's just add an email boom 7:08 subscribe so it says that it's working 7:10 however there's no end point for this so 7:12 let's go ahead and let's basically come 7:14 to lovable or actually let's go to 7:18 zapier and what I'm going to select for 7:21 the triggers I'm going to select a web 7:22 hook trigger event is going to be catch 7:24 hook so essentially what a web Hook is 7:26 it's it catches information from 7:28 different applications so essentially 7:30 when somebody clicks subscribe it will 7:32 then send the email address to this web 7:35 hook URL which will be inside of zapier 7:37 which we could then take and use in an 7:39 automation That's The Power of zapier 7:41 and why it's a great platform but let's 7:43 click continue and we just need to copy 7:45 this URL here don't click test trigger 7:47 yet but I'm going to come back and just 7:48 say when a user clicks subscribe to the 7:51 newsletter send the info to this web 7:55 hook URL I'm going to paste that zap 7:57 your web hook URL and let's give it a 7:59 sec okay it's saying that is now sending 8:01 a web hug Let's test this right so thank 8:04 you for subscribing if this is working 8:06 we should now see a new request record 8:08 which I do so there we go it shows the 8:11 email which is the email I just added 8:13 and it shows a source which is a 8:14 newsletter subscription that is great 8:16 that's working so I could continue with 8:18 this next up what I'm going to do is I'm 8:19 going to actually go to a chatu t step 8:21 and I'm going to basically create a 8:23 thank you or a welcome email to this 8:26 user so let's go to conversation connect 8:29 our chbt openingi account I'm going to 8:31 basically say greet the user say welcome 8:34 the user to the the AI for non tees 8:39 newsletter okay so welcome the user to 8:42 the AI for non techies newsletter this 8:44 is his newsletter that uses that 8:45 showcases all the new AI developments 8:47 for non-technical people summarize the 8:48 email in two sentences and then I 8:49 basically said here's the user's email 8:51 to custom greet them and I added my 8:53 email address so let's go ahead let's 8:55 select chat t40 mini let's just move 8:57 forward here click continue and let's 8:59 test this it should now craft an email 9:01 using chbt obviously so the reply is 9:04 welcome to the AI for non Tech's 9:05 newsletter Brock we're excited to bring 9:07 you the latest developments in 9:08 artificial intelligence boom that's 9:09 actually pretty great so let's go ahead 9:11 we can publish that but we need to add 9:13 some new steps here actually so what I'm 9:15 going to do is I'm going to come over to 9:16 Gmail and I'm going to create action 9:18 event and this is going to be send email 9:20 I'm going to basically take the email 9:22 address that I captured from the web 9:23 hook so add my email address here from 9:25 email we need to select a from email so 9:27 it's going to be the same one just for 9:29 the sake of testing this out and for the 9:31 subject let's just say welcome to the AI 9:34 for non techies Community that's great 9:37 and then for the body we need to 9:39 actually take the reply message from 9:41 Chach BT from our previous step that it 9:43 generated click continue let's now test 9:45 this step and I should now be receiving 9:47 an email let's take a look here we go so 9:49 here is the email welcome to the AI for 9:51 non techies Community there we go it's 9:52 customized for me that's all looking 9:54 great there what we could also do is we 9:56 could actually add another step here so 9:58 let's say you have an email marketing 10:00 software like clavio for example you 10:02 could come here and you could basically 10:04 add them to your newsletter and that is 10:06 what I'll be doing I need to actually 10:08 set up my newsletter platform and 10:10 configure with zap here but we could 10:11 basically add a profile to list it would 10:12 then send that email or it would then 10:14 add that person to our newsletter and 10:17 that should be all good to go there all 10:19 right this should be good to go our 10:20 automation on the back end should be 10:21 working so I'm just going to go ahead 10:23 I'm going to publish our landing page 10:25 and let's test it out one more time boom 10:27 this guys this looks so smooth I'm so 10:29 happy with the template we chose so AF 10:31 for on Tech Made Simple this all looks 10:33 great everything looks amazing in here 10:35 boom let's add our email address so I'm 10:37 going to subscribe to this we should now 10:39 be receiving an email and there we have 10:41 it here is the email so dear mess 10:44 shipping Services welcome to the AI for 10:46 non te's newsletter your go-to source 10:47 for the latest AI developments presented 10:49 in an accessible way we look forward to 10:50 helping you stay informed so there we go 10:52 guys we built out our landing page using 10:55 lovable we used a template we made some 10:57 edits with their new edits feature and 10:59 we are ready to launch this so hope you 11:02 guys got some value from this if you 11:03 guys enjoyed this video make sure to 11:04 leave a like leave a comment there's a 11:06 link to use both zappier and lovable in 11:08 the description that being said I'll see 11:10 you guys in the next video