Web Scraping App Built in Lovable: Firecrawl and Open AI API Integrations

0:00 hello everyone welcome to today's video 0:02 my name is Lucas and today I just want 0:04 to share a quick little lovable project 0:07 that I built that I'm actually building 0:09 on with a a friend and client of mine 0:12 and it's basically finding a product 0:14 page you know you know Shopify site and 0:18 kind of dividing the different sections 0:19 so we have like section one over here we 0:22 have section two which is the title 0:24 section three which is this main 0:25 description then we have the reviews the 0:27 size or the volume the benefits it's the 0:30 price the video um FAQs how to use key 0:35 ingredients and more right so basically 0:38 getting all like you know using sh uh 0:41 lovable to add a link and then it 0:45 generates different sections that it's 0:47 scraped from that website and then what 0:50 you can do is just generate a CSV of 0:52 that file and bring it into framer and 0:55 kind of portray it in a way um just 0:58 basically 1:00 you know dropping all of that 1:01 information into framer so yeah 1:04 basically I want to just show you kind 1:05 of how it works so I'd have to first um 1:08 get my API key from open AI so I'm just 1:10 going to save 1:13 that okay so this is not 1:15 working let's 1:22 see and then okay let's get the fir craw 1:24 one so I'm just going to have to go to 1:26 my 1:27 dashboard and copy this API key and fire 1:31 CW is basically the one that you know 1:34 does the the scraping and then I'm going 1:37 to add this link from this website parse 1:40 product page it's going to um parse and 1:46 let's wait for it to process and then 1:48 boom we have different sections we have 1:50 the titles we have the reviews we have 1:52 images and more and what I've also done 1:55 is that you know sometimes there's a few 1:57 errors when you when you uh bring this 1:59 in information in so what you can do is 2:02 you 2:02 know delete certain sections like or 2:05 certain parts of the text like this 2:07 click on Save and then once that's saved 2:11 right um and let's let's say for this 2:13 one it it kind of did it not so 2:15 correctly we want to for example only 2:18 have this over here right so we can 2:20 delete all of this and we can delete 2:23 what's below which is a lot of 2:25 stuff and just keep this right and once 2:28 we click on Save we can click download 2:31 CSV and it downloads a CSV file and we 2:34 can go into uh Google Sheets and we can 2:39 open that file and basically it's going 2:42 to have that saved information that we 2:44 corrected afterward so let's just open 2:47 this and you'll see once it's opened 2:51 that we 2:52 have um this title that's power potion 2:55 with this little symbol on the very 2:58 right not with with many spaces and we 3:00 just have this text over here right so 3:03 this is a good way of of doing this um 3:06 and then eventually what you can do is 3:08 you can share this link go into framer 3:12 open a new CSV or or you know go to uh 3:17 adding a Google Sheets with a plugin so 3:20 let me just delete this adding a Google 3:22 Sheets plugin Google sheet CSV and 3:25 basically inserting the data and 3:27 creating a CMS page from that so if this 3:29 sounds interesting for you guys on how 3:31 to build something like this with 3:32 lovable let's get started because um 3:36 yeah there's a little process behind 3:37 this and I just kind of want to show you 3:39 guys that whole process so in lovable 3:41 you can see the history of your chat so 3:44 I went all the way up I think I did like 3:46 20 prompts or 30 something like that so 3:49 we're going to go you know step by step 3:51 and use the same type of promp thing 3:54 here so we can get something similar and 3:56 by the way if you're interested in this 3:58 you know this little beta project I have 3:59 it for free down in the description 4:01 below you can go ahead and down or copy 4:03 that to your lovable project so by the 4:07 way let's just start here so it says hi 4:09 there I need to create an app where I 4:10 can submit a product page link for an 4:13 eom from an e-commerce store I'm going 4:15 to put and the app can generate a site 4:17 link that with all the text divided by 4:21 the page 4:23 section and then generate a CSV file 4:25 okay so let's just do something very 4:28 similar hi there I need to create an app 4:31 um where I can submit a product page 4:34 link of an e-commerce store and the app 4:37 can generate a site 4:39 link with all the 4:44 text site L okay I don't really remember 4:47 what I meant by this and then generate a 4:49 CSV file that contains each section of 4:51 that page so let's just start off like 4:54 this and I'm going to basically go in 4:56 the same type of you know direction as 4:59 this 5:00 so it's going to be generating something 5:03 now so I'm excited to create a minimal 5:06 yet elegant app 5:08 I'm it says in this original one it says 5:11 I'll create a Sleek minimalist web 5:14 application and then we get a different 5:16 type of answer I'm just curious to see 5:19 the difference between the designs we 5:21 have like this nice design it's 5:22 basically very similar to what we have 5:25 in the beginning so this turning little 5:28 icon the logo right right e-commerce 5:31 product page parser and then we have 5:33 this little description and then we have 5:35 these uh API keys that we're that I 5:39 actually add at the end of this prompt 5:41 and then we have this uh URL enter URL 5:45 section so here it's still building and 5:49 be and you know just to wait while it 5:51 builds I want to kind 5:53 of get I want to remind myself what it 5:57 said afterwards so your Ecommerce 6:00 product page parser is now ready it 6:02 features a clean Apple inspired 6:03 interface and smooth 6:05 animations 6:07 right and then it says what next refine 6:09 and customize Master prompting okay 6:14 so now and then the next thing I I want 6:16 to add is when I add a link the process 6:18 par link results give me wrong 6:20 information okay so it's basically 6:23 giving me dummy information I think 6:25 that's the case right so let's just wait 6:27 for this to be finished so we do get a 6:29 different design which is interesting 6:31 this one gave us this design the 6:33 original one and this one looks a little 6:35 bit different it still looks really 6:36 clean I really like the design that 6:38 lovable gives and what I'm going to do 6:40 is I'm just going to copy this page and 6:44 paste this here and it's going to 6:46 analyze analyze product page it gives me 6:48 like a different type of loader which is 6:51 also 6:52 nice you it's cool to compare the 6:56 differences and you can try this out by 6:58 yourself maybe add some references to 7:01 designs if you want and the generating 7:04 does take a little bit um slower time 7:08 than with me with my original one it 7:12 takes like around 10 seconds more here 7:14 it takes like a good 5 to 10 seconds 7:16 here it's like maybe 15 to 20 but it 7:19 worked so I'm just going 7:21 to do this so Su extracted nine content 7:24 sections so we have the product title we 7:26 have the directions and tips and by the 7:29 way way it 7:31 [Music] 7:33 um it does it correctly already like 7:36 it's already working 7:38 because um I don't understand why I 7:42 guess it's because I already 7:44 integrated this fire crawl 7:47 before but it also added a few sections 7:50 that we don't really 7:52 need and it call this five stars we want 7:56 to call it review so we have to just 7:58 drop down these different things that we 8:01 need to 8:03 correct and so let's just do that there 8:08 there are a there are a few things that 8:13 need 8:17 correcting so we have the first thing 8:19 which 8:21 is so so product title seems to be good 8:25 directions and tips 8:29 so they're kind of putting 8:33 everything all in this one thing 8:39 so let me go back 8:45 here and do this 8:49 again 8:52 so so power 8:55 potion hair growth it should start with 8:57 hair growth see if we can find 9:04 that 9:11 okay 9:13 directions and tips should just should 9:18 be 9:20 called 9:23 description description so let's just 9:26 start with the titles first way changing 9:29 the title so we don't go so deep into 9:32 this descriptions yet so key ingredients 9:35 is good watch more on 9:39 so section three can be deleted because 9:44 we don't there's nothing really 9:46 there section 9:50 4 9:52 uh features and benefits 9:59 section 4 should be 10:02 called 10:04 features 10:06 and features and 10:11 benefits now we go for the next one 10:13 ingredients is fine frequ frequently ask 10:16 questions Okay cool so it's already 10:19 doing that with the FAQs in mind it 10:22 didn't really work with the 10:24 FAQs interestingly so let's Analyze This 10:29 so that is going good ingredients is 10:32 called 10:35 ingredients Crown polisher should be 10:37 called 10:39 price oh no I don't know what that's 10:45 for so Crown polisher should be 10:53 deleted and five 10:56 stars should be called 11:04 reviews we are missing a 11:09 price 11:11 section we are missing a 11:16 video video 11:19 section we are 11:22 missing a an 11:24 image 11:26 images section 11:29 okay so what I want to do is I can 11:31 actually give it a few things to kind of 11:35 um look at so I took a few screenshots 11:38 yesterday which one was 11:41 it it was like a good one that I took I 11:44 think I downloaded this 11:48 here yeah it's this one so if I double 11:50 click this you're going to see so these 11:53 are the product images and it looks like 11:55 this so I'm going to basically give this 11:58 this image 12:00 as 12:03 reference and send this out and see what 12:07 it 12:09 generates now it works so fast with me 12:11 to actually get the real data because I 12:14 already have this fir craw connected to 12:18 my lovable account but it's going to ask 12:20 you to connect it somehow so if I go to 12:23 this original 12:25 one um 12:29 it says you now need to sign up for fire 12:31 fire crawl and enter it in the new API 12:34 key form so basically I did that and I 12:38 guess it's saved now with lovable which 12:40 is great 12:42 so yeah this is just basically something 12:45 to you know 12:48 um be aware of so when I add a link to 12:51 process part link results give me wrong 12:52 information how can we get the exact 12:54 info so it says I understand and to get 12:58 actual condent for website we need to 12:59 implement real web scraping functional 13:02 functionality 13:05 um so let me implement the solution 13:08 using the fir craw service which is 13:10 designed for web scraping and then 13:13 basically adding that API key so that's 13:15 just something for you guys to you know 13:17 keep in mind for your project and now 13:20 this finished so let's just go ahead and 13:23 add this again analyze and we have 13:26 product title let me see if things okay 13:30 so this still hasn't been 13:33 fixed ingredients hasn't been fixed this 13:37 has to be 13:39 fixed three four so it deleted those 13:41 sections but it 13:45 didn't so I'm going to say the renaming 13:49 of the 13:50 sections didn't work 14:01 let me see if there's a price in video 14:04 section so there is no price 14:10 and price and video 14:15 section so let's just send that over as 14:18 well and another thing that you notice 14:20 from what I did here was that I mean we 14:25 can see that 14:27 in in the beginning of the video where I 14:29 was basically editing the the different 14:32 boxes you can I added this manual edit 14:34 function so whenever you see something 14:37 is wrong you can click on that little 14:39 pen button and manual edit that section 14:43 so um that's eventually something that 14:45 we're going to have to do here as well 14:46 so let me just do this I also added an 14:49 AI section but actually we don't really 14:52 need that because it's basically there 14:55 it's an open AI API that integrates with 14:59 this app and if you want to rephrase 15:01 something you can click on it but we 15:04 don't really need that because we want 15:05 the exact information so um yeah just 15:09 wanted to share that okay so now it's 15:11 corrected the problem with the uh 15:15 different titles and now I want to kind 15:17 of edit these things right like I 15:18 mentioned before so um 15:22 please add the function so I have it 15:25 written down somewhere here and we can 15:27 kind of use the same one 15:29 um I just have to look for it okay so 15:32 let's just get this let's copy this 15:36 bring this in 15:38 here shift enter let's go back here and 15:42 then I have this so this is the the 15:44 editing thing and this is for the open 15:46 AI function and now what I want to do is 15:49 I want to do whenever you edit a section 15:52 you can save it and it'll be updated in 15:53 the CSV file so let's just add these two 15:56 things in the prompt and 15:59 see what it Cooks up okay so lovable has 16:03 basically added the ability to edit each 16:05 section's content with a simple edit 16:07 save workflow okay so let's go here copy 16:10 this again paste this over 16:13 here paste this over here analyze and 16:17 now you can see there's this edit button 16:19 and I'm going to go ahead and edit this 16:21 one I'm going to go ahead and edit this 16:25 one I don't know why it looks like this 16:27 but 16:29 let's just 16:31 see 16:32 save and we can download CSV and I just 16:37 want to make sure that this is you know 16:39 all true and another important thing is 16:42 to format the CSV in a way that you can 16:46 easily import it into framer because if 16:49 you want to import it into framer you 16:50 have to make sure that the section 16:53 titles are on the top in the first row 16:56 and they are not you see they're down 16:59 here like this so but okay and it also 17:02 didn't work with 17:04 the saving I madean it worked here but 17:07 it didn't work here I 17:09 wonder oh because I didn't click on the 17:11 save okay it should work 17:13 anyways so we have these different 17:16 images okay great so now the next thing 17:19 is that um we need to format this CSV in 17:23 a different way so instead of having the 17:25 titles in the First Column the titles 17:28 have to go in the first row so we can 17:30 just say that the the 17:33 CSV file format must be a bit 17:40 different we have 17:43 to instead 17:45 of instead of the section titles 17:50 going on the 17:53 First 17:55 Column they should be on the first 17:59 row and their 18:03 corresponding content should go below 18:08 them so let's just write that and see 18:10 what what they what they make with this 18:12 so it has been updated so let's just go 18:14 back copy 18:16 this and paste this here 18:22 analyze and what we're going to do now 18:26 is wait got to wait a little bit like I 18:30 said this one's going to take around 10 18:32 to 20 seconds in my other one that I 18:34 built yesterday it takes around 5 to 10 18:37 seconds so that's kind of strange I 18:40 don't know what why it you know this one 18:43 takes longer than the other 18:45 one 18:47 so now it's basically refreshed let's go 18:51 ahead and edit these things so I'm going 18:53 to go ahead and delete this click on 18:57 Save edit this 18:59 just leave this 19:00 one and click on Save and for these key 19:05 ingredients let's just delete this let's 19:07 make it a little bit 19:09 more how would you 19:13 say formatted in a way so rice 19:21 water we can put all of this like 19:25 this I mean it's just okay with with one 19:27 of these okay okay so I I understand so 19:29 this is like the little 19:32 title this one is this 19:35 one Bo let's just save this let's delete 19:39 this the 19:41 rest and save it like this 19:44 boom and for this 19:47 one we can go like 19:52 this so this one's still called 19:54 directions and tips it's supposed to be 19:55 called 19:57 descriptions but let's just just leave 19:59 it like 20:04 that and delete 20:08 this we have the same repetitive one so 20:11 that must also go away and then we have 20:14 the FAQs which need to be better 20:16 formatted but you get the idea I just 20:17 want to show you kind of the beta of how 20:21 this beta version of how this works so 20:24 we've saved these different sections 20:25 let's click on download CSV we 20:27 downloaded it let's go back to our 20:30 Google Sheets and let's open this to see 20:32 how this looks like with the new format 20:35 click on upload we click on 20:38 browse and then we click on this one 20:42 open Let's cross our fingers and yes 20:45 it's working fine right and it's updated 20:49 so you can see product title is power 20:52 potion and then we have this $44 so 20:54 that's great that's great um now what 20:57 we're going to do is we're going to 20:58 bring this into framer so this is kind 21:00 of like the main uh goal of what we 21:02 wanted so let's bring this into framer 21:05 so in framer I have this new project 21:09 nothing's built yet I have no CMS but 21:12 what we're going to do is we're going to 21:13 import a CMS from Google Sheets we're 21:16 going to just call this like test for 21:18 today create and what we need to do is 21:21 we need to go back to Chrome click on 21:23 share make this anyone with the link and 21:27 let's copy the link I'm curious to see 21:30 if I put editor let's copy this link and 21:34 let's go back to framer and let's paste 21:37 this and then we have this page right 21:39 where it says over here so going back to 21:43 framer let's put on next and then we 21:46 have a few things we have the product 21:48 title which can be a string um we have 21:51 the price which is a number we have the 21:54 images which is a formatted text we can 21:56 actually use a link for this but I would 22:00 put format text because this is a a 22:02 collection of images and eventually you 22:04 just need one image right so video would 22:08 be a link I would say and then we have a 22:10 bunch of format ATT text so let's just 22:12 get started and boom we have this going 22:15 on so that's great um for the YouTube 22:18 video we don't we it's just youtube.com 22:21 so it didn't really parse it 22:23 correctly and let's go ahead and see 22:26 this so it's looking good and this this 22:28 is just kind of like the initial way of 22:30 doing this um so you want to go to CMS 22:34 page you want to go to test which is the 22:36 name of your CMS and click on Details 22:39 page and now boom we have 22:41 this large collection of different parts 22:45 data 22:46 and I mean these are the images for 22:48 example but we can just delete these and 22:52 these are the different sections so 22:56 let's just see what this is called this 22:58 is the directions 23:01 one then we have the different other 23:03 sections so we have key ingredients 23:05 which 23:06 is somewhere down here yeah right 23:10 here we have the 23:12 ingredients so this is also repetitive 23:15 so these are the different things that 23:16 we can add to 23:19 framer but we need to format this 23:21 correctly in order for it to work 23:24 right so these are this is the next 23:27 thing and this five stars which should 23:30 be called 23:31 reviews should be the 23:34 reviews but then let's say we want to 23:36 duplicate this and we want to link this 23:38 to something else let's say we want to 23:39 put 23:42 a uh how would you 23:45 say we can even put like a YouTube thing 23:49 so I can delete this so I can get this 23:53 big text and I can remove the content 23:56 variable and put another thing like 24:00 um say the price 24:03 or the product title and we can put that 24:06 at the very top right so now we're going 24:08 to have that edited product title like 24:11 this and we can you know style this to 24:14 be a little bit bigger we even have the 24:17 title here so we can do that up there 24:19 but let's just delete this for now right 24:22 and so this is kind of like the very 24:24 very beta version of this you know we're 24:27 trying to 24:28 bring in stuff and create a page that 24:30 eventually will look similar to this or 24:33 your own design and in framer right so I 24:38 think in order to have a better 24:40 understanding of this I'm just going to 24:42 delete a few images from 24:44 here so I'm going to go ahead and delete 24:47 these and save so we only have this one 24:51 image um for this YouTube video I'm I'm 24:54 just going to go ahead 24:56 and choose so I'm just going to choose 24:59 this link over here and I know that I 25:03 can get some type of other 25:05 link like this one right so we going to 25:08 replace it with 25:09 this 25:11 and boom so we have one 25:14 image we're going to have this 25:17 title save we're going to have this with 25:21 only one save we're going to have this 25:25 as 25:27 just this this first part so this is 25:31 going to be like the 25:34 description the lead save key 25:38 ingredients we're just going to 25:42 have the different key 25:46 ingredients and give it like a nice 25:49 spacing between everything else so I'm 25:51 just going to format all of 25:52 this so um I'll just press play play 25:58 again whenever I'm done so I just edited 26:01 everything over here and what we're 26:02 going to do is the following we're going 26:04 to just download the CSV again and try 26:08 to import it into framer again so I'm 26:11 going to go back here and do this right 26:15 like the same process 26:17 upload open and get this one that's 26:20 pretty new yes and what we can do is 26:24 just check to see if everything is right 26:26 I added a new YouTube link so that must 26:28 be working and I want everything to 26:31 be in 26:33 a you know text format 26:36 somehow so especially the YouTube and 26:40 the 26:41 image so let's go ahead and do that I 26:45 mean the image can be an image let's see 26:49 so okay again I'm just going to go ahead 26:51 and click on anyone with the 26:53 link let's make this editor just to it 26:56 doesn't have to be editor I'm just like 26:58 like checking out to see if that is a 27:00 better option we go to 27:03 framer and we can go to our CMS and we 27:06 add a new collection and we can call 27:07 this one we can call this one test 27:12 two create and then we just paste this 27:16 we choose this let's make everything a 27:18 string even the the price because I 27:21 don't really want that 27:23 number um I mean we can make it a number 27:25 why 27:27 not actually no let's just leave it a 27:29 string uh uh a number image can be an 27:33 image so let's just you know see how 27:36 that works this can be a 27:39 string format of text format text string 27:42 let's put format of text format a text 27:45 and let's just click this and it says 27:48 fail to construct URL so that means that 27:51 there's like something over here that's 27:53 not really working I think it's this one 27:56 so yeah 27:59 so we got product title the slug which 28:03 generates automatically we got the price 28:05 we got the image we got the video we got 28:08 the 28:09 description key ingredients this one we 28:12 can just delete we didn't really needed 28:15 FAQs and the ratings so now what we can 28:19 do is we can go back to Pages click on a 28:22 new CMS page test to detail and it's 28:25 looking a little bit more structured 28:27 obviously it's it's still not perfect 28:29 but it's looking more 28:31 structured and I'm just curious to see 28:35 how we can do this with the YouTube 28:36 video so if I were to go here click on 28:39 YouTube and bring this somewhere down 28:42 here we can somehow add this link to 28:46 video oh and there we have it that's it 28:49 and then we can change this to another 28:51 type of style like a H1 that can be 28:57 somewhat in their style so I have to 28:59 check just check and see what kind of 29:01 font this is this like a a Sarah font so 29:05 we can just choose one type of seront 29:07 ambrio ambro I don't think we have that 29:10 so let's just choose another type of 29:13 sarant and this is going to be bigger 29:15 it's going to be like 29:17 54 and it's going to be black and not 29:21 gray so let's just remove this and let's 29:26 give it a nice sarap font so put serif 29:29 this one looks pretty good and let's 29:33 make it maybe 29:34 medium right so we have this going on 29:38 this is looking good now we have this 29:39 image so we can delete this one but this 29:42 image is the one that's um I'm kind of 29:45 curious to see how this would look like 29:48 so I can add a 29:51 frame go like this and the fill can 29:56 be image okay so this is not really 29:59 going to 30:00 work 30:03 um I guess and and what's cool about the 30:06 framer Google Sheets framer plugin is 30:08 that we can you know edit certain things 30:11 so I can go delete this get this put 30:17 this here and it's going to look like 30:19 very small so maybe we 30:23 can remove 30:26 this so again I'm just experimenting 30:28 here I don't know if this is if what I'm 30:29 doing is the right 30:32 thing okay now it looks better okay so 30:35 we can keep it like this and we can you 30:39 know save this it's already 30:42 automatically saved so we go back to 30:44 framer and we go back 30:48 here and it is like this let's see if I 30:51 sync this it's going to change yep it 30:54 changes but we need to resync this so 30:58 that we can or just go like this and 31:00 change this so we have images and we can 31:02 make this as an 31:05 image okay it doesn't really work 31:09 URL or link is the next one okay we can 31:14 try to do it like that so I'm going to 31:17 set this fill to images no it's still 31:20 not doing it 31:23 so this is where we got to you know 31:26 think a little bit and see how to do 31:30 this so we got this link but we want it 31:35 to be an image probably there's a way 31:38 to image format framer 31:44 CSV so CSV 31:47 import we can look at this kind of 31:50 tutorial and see how the images should 31:54 be formatted 31:58 I don't really have any images to be 32:04 honest color 32:10 tint it would be nice if there was some 32:12 images but there's not really images in 32:14 this 32:20 video okay we'd have to see so images 32:23 from URS will be automatically 32:24 downloaded from the original source 32:29 Imes in your CSP cont must be URLs to to 32:33 an 32:34 image 32:38 okay so the are URLs maybe we just have 32:41 to style this like you know go here and 32:46 edit 32:50 this HTTP forward SL 32:56 slash HTT TP 32:59 sorry right oh https I don't 33:04 know let's click on this and yes we do 33:07 have this so let's just save this we 33:10 resync it in framer 33:17 sync and so we 33:20 manage and it'll be amazing if this can 33:22 sync as an image and it's working okay 33:24 cool now we have the image so we just 33:27 had it had to format that a bit now what 33:30 we can do is like I was showing you with 33:34 this uh frame we can just go like this 33:38 and add the images right so we have this 33:41 one 33:42 image obviously be it would be nice to 33:44 have the different images this is just 33:46 like the beginning right we're we're 33:47 just I'm just showing you the the 33:49 beginning today so then what you can do 33:52 is just style these things to be you 33:54 know like a stack add a stack make this 33:58 look like this maybe put this one 34:00 afterwards and make this a fill 34:05 width and maybe get this and put this 34:08 align on 34:10 top give it a nice little Gap 34:13 here and then instead of images here 34:16 this can be the description so we can 34:19 put which one was it directions and tips 34:22 perfect so it's starting to look a 34:24 little bit more like this original one 34:27 right 34:28 um I think it's going to take some more 34:30 time for it to look like that but you 34:33 know we're doing it uh slowly so this 34:37 key ingredients can also go here for 34:39 example and we can put this video also 34:42 in here and this one okay so let's make 34:46 this a fill WID perfect so this is all 34:51 fill width great and this one can have 34:54 like a nice sticky position where all 34:57 these can be overflow 35:00 visible um overflow visible perfect and 35:03 overflow visible so if I were to press 35:07 play this can stay at the top and do you 35:11 can already start building something 35:13 like that I do think that this page has 35:16 a lot of you know gaps here and there 35:21 this stack should be set to fill and not 35:25 fixed and 35:29 let's just put all of these into one 35:33 stack or we can just put a stack here 35:36 and give this a radius of padding sorry 35:40 so we can put 60 on the right 60 on the 35:43 left boom starting to look more and more 35:46 like a product 35:49 page I think this needs to have a little 35:51 bit 35:53 more WID perfect just like that and and 35:58 as you see it's starting to look more 35:59 and more like this right still needs 36:03 some nice fine-tuning for example we can 36:05 go back to framer and make this a type 36:09 of style where we 36:14 have a little bit more 36:17 custom 36:19 um obviously it it would be really nice 36:22 if we can edit the information 36:24 here as 36:26 well but um yeah this is basically like 36:29 a nice little example we can put these 36:32 together into its own stack and kind of 36:36 give this a nice gap between each 36:41 other like 36:43 60 36:44 and these key ingredients for example we 36:47 can also kind of make them in a 36:50 different 36:52 style put them more closer to each 36:56 other and boom have something like this 36:59 and then over here for example we can 37:01 also put this into its own 37:03 stack um make these guys fill it's 37:08 already fill but it has a max width so 37:09 let's remove that and we can give this a 37:13 nice padding on the right and 37:17 left and this is basically you know the 37:22 first the first uh draft of how you 37:26 would do that right so 37:28 put these together and then we can just 37:31 give some nice uh Gap here to this main 37:36 stack something like 60 and give this 37:40 also a nice style that it's not 37:43 so right so that's basically it this is 37:47 like a a quick little you know video 37:49 showing you how to get data from a 37:52 specific product site and bring this 37:56 into uh into framer right with some 37:59 little bit of manual tweaking but yeah 38:02 it's really good for an MVP if you want 38:04 to you know build landing pages really 38:06 quickly by getting information from 38:09 another landing page doing it bringing 38:11 it into framer and boom trying to 38:14 actually build something that uh like a 38:17 like a redesign and send them an email 38:19 maybe and say hey look at this redesign 38:21 that I made with your content uh tell me 38:24 if you like this or not we can you know 38:26 work together somehow so 38:28 yeah guys hope you have a wonderful day 38:30 thank you so much for watching again the 38:32 remix lnc or the the yeah remix link to 38:36 this is down in the description below 38:37 you can use it for your for your own 38:39 good use and explore further all right 38:42 thank you guys so much for watching 38:44 bye-bye