This website, this website, and this website were all built without writing a single line of code. And there are these three tools that when combined allow you to build $10,000 websites in a matter of minutes. And so today, I'm going to show you exactly how you can use them so that by the end of this video, you can build your own designer grade website. But first of all, what do I mean by a $10,000 website? Well, I went to Claude and asked it what a simple $10,000 website would look like. And what Claude told me was that it would need to have several pages that it would have to follow design theory, meaning all the guidelines, a brand book. It would have to have a CMS. And on top of that, I'm going to add some 3D elements to this so that it really pops. So get ready cuz we're going to have some fun. Okay, so this first tool is pretty much the only reason any of this is currently possible. They started off actually as an agency building really expensive websites for clients. realized that people actually needed similar elements, started creating a components library, and then turned that into an AI tool that I'm about to show you that's going to completely blow your mind. The name of the company is Reloom, and by their website, you can see that they look pretty nice and fancy. And there are really three key things that this allows you to do. So, if you think that you know this platform, think again. The first thing is site maps. Then, we're going to talk about wireframes and then style guides. But instead of telling you what this does, let me jump in and show you. Now, once I create an account and log in, this is what I'll get access to. Here on the top right, I'm going to be able to create a new project. Now, for this project, I'm actually going to be building a website for a software business I'm about to launch that's called Outbound. It's an AI tool for sales team to be able to upload their list of leads or create ones from scratch, enrich those leads with up-to-date information about those contacts, including LinkedIn profiles, company profiles, emails, phone numbers, pretty much anything that you might need. And finally, to generate highly customized and personalized emails for each one of those individuals so that we can actually send out messages to run highly performing outbound campaigns for your business. Ultimately, finding and closing more ideal customers. So, the first thing I want to do is to actually implement a first description of the company and also mention a couple of the key features. Build a website for a SAS company called Outbound. It's a platform for sales teams to build lists of ideal customers, enrich their profiles, qualify them, and create highly personalized outreach messages. Now, under here, you're going to notice that there are additional things. We can choose how many pages, but I would literally just click on generate sitemap. Now, a site map is basically the different pages that you're going to have inside of your website. Not just that, but also each section of each page. So, if we click on this, it's literally going to generate it. Boom. Just like that. It's pretty much building out each one of these sections. As you can see, each section also has its own prompt. And it's also created these additional pages here. It's even creating a CMS. And if I like these pages, I can just say generate this content for all of them. And that only took a couple of seconds here. But as you can see, it's created all of this. Now, the first thing I would do is go here and basically check out the sections that I like and don't like. So here, let's say that yeah, I like these sections. Testimonial. Maybe the testimonial I'll bring a little bit higher up before the benefits. So I could reorder these as I wish. Now once I'm happy with the way this page looks, I just have to click on wireframe and look at what this does real time. I will literally continue to speak so you can see it happening in real time and you know that this is not being chopped up. It's basically building out all of these individual pages one by one. And let's zoom in here so we can just see what it's actually doing. Close more ideal customers with personalized outreach. It's writing all the copy. It's creating image placeholders so that I can replace those in the future. It is literally just building out all of these pages from scratch. Now, I know this is already impressive, but check out what you can do. You can click on each section and the next thing for you to do is to basically select the actual one. So, if you want to replace this component, you can go and because they used to be a components kind of library, they have hundreds of different sections, pretty much every different section that you might want for this specific hero section. And so, the next step here is literally just to replace the components with the ones that you like. And once I'm kind of happy with this section, this next part is really going to get you excited. I can simply come back here to the top and I just click on the style guide. And now suddenly we're able to make all sorts of changes. Here on the right hand side is my landing page. It's already basically created the entire design system around this. And this is the best part. I could literally just shuffle this. Like look at what I'm doing right now. I'm shuffling here the colors. Just see different styles. It's already using placeholders so I can see what this website might look like. I could literally just select this and export it just like that. Um, but let's continue this work. I'm going to show you all of the possibilities that there are here. So, now let's say you're a designer and you actually have specific colors that you love or that your client loves that you're selling this website to. I have a set of colors here inside of Figma. So, I'm going to pop those up. These are actually the brand guidelines for my other company, We Are No Code. But, I'm gonna basically going to use this. So, the first thing I'd do is I'd grab my main colors, right? This is one of my colors right here. Um, and so I would just grab the hex code here and you could basically bring it over to your reloom and uh, click here. Then you can change this. Boom. I'm going to put in this one. There you go. I'm going to lock this one in. And then I could grab the other colors. But let's say that I only had this color for the moment. I can basically have it just shuffle through the other colors until I find a color palette that I actually like. And if I find a second color that I find pretty cool, I could just lock it in. And once I found all the colors that I like, I would basically stop. Now, in this case, I want this website to be dark mode. So, up here, I could just click dark mode. I'm going to go ahead and click on that. Excellent. And it can actually allow me to adapt inside each one of these sections as well. Now, I'm adapting the fonts here. I actually like this font. This is a good one. And then here, I can remix. And the cool thing here is that, so this is for the subtext, the body text. I see these two actually work well together. And that's a really cool thing here is that they have a design system that's already incorporated. So, it basically is very difficult to make things ugly. But let's keep going. The buttons here, I love them. I actually like the styles of the buttons here. So, I would kind of keep them like this. And then, okay, let's see what this looks like on mobile. Man, it looks clean if you ask me. Let's go back. Okay, let's say there was something I wanted to change here. For example, I could come back here and let's say that that logo, I'm actually not a big fan of that logo. I want to replace this component. Let's just make it a simple component where, you know, we have it like this. I want to switch it to that. If we come back into the style guide, it's already adapted this back. And that's what I really, really love about this. I think this looks great, but let's see if the customer does. I'm going to go ahead and pitch the concept. So, here we see that we can actually see a full preview of the concept and share this with the customer and be like, "This is your website. What do you think?" So, now the next step is for you to adapt this wireframe in a way where it looks absolutely perfect for you. Now, you'll still be able to change things later on, but the next step is going to be to export. So, the more that we can do here, the better. Now, if you have an app idea, but you don't know how to code, then listen up because we have an amazing program that allows you not only to build your app with you, but actually to learn the skills to be able to build apps and launch them in the market, turn them into profitable companies without writing a single line of code. code. And this program is the MVP accelerator in which we help you define the key features to build out and to plan the app, test the market to make sure you're building something people actually want, build it out with a one-on-one coach, and then launch it in the market and get your first paying customers. So, if you're looking to fasttrack your journey and you're very busy, then this is probably the right path for you. You can find all the information in the description. It's an applicationbased program. Now, unfortunately, we have limited coaches, so we can't accept everyone. But apply and see if you are eligible to be a part of this program. And yes, you literally don't need to know how to do anything else but basically use social media to be able to build apps leveraging AI. And we can teach you exactly how to do so. So, don't be scared. Apply. We only bite sometimes. Let's get back in the video. Okay. So, once we're ready to transform this into an actual functional website, we're going to go at the top right here. We're going to select export to Web Flow. When I click on export, click on this button. It's going to tell us we have two important things to do. Number one, we need to clone the style guide. That's Reloom style guide inside of Web Flow. We also need to install the Reloom app. It's a Web Flow app for Reloom. So, you'll be prompted to do both those things here. And you can click on one of them to get instructions. So, for example, here, if I click on that, it's going to install the Reeloom style guide. I can clone it in Web Flow. You obviously have to create a Web Flow account for this to work. And then we're going to install the Web Flow app as well. So now I've cloned the style guide over here and we can see it. And if I now come down into apps over here, I can just click here. Reloom site builder. I'm going to install on this site. Now we can basically log into Reloom through this app. App is successfully linked. Congratulations. And now what we'll notice is that this app will actually have this little thing that says Outbound. So if I click on Outbound, I can go ahead and click on that. If I have several versions of it here, I only have concept one. Click on concept one. Now, it's going to ask me which pages I actually want to import. And I'm not actually going to import all of them here because I'm just really trying to showcase how this could work. Uh, but here we'd be able to import everything. In this case, since we only really adapted the home, we didn't adapt the additional pages for the moment. I'm just going to import the home. Start import. Bang. And just like that, it tells me that I've saved 4 hours and 30 minutes with this import. So, I'm going to go ahead and see it. And so now this is a fully functional website with code generated behind it. It has all the sections as we had created them. And now we can start coming in here and we can start fine-tuning it. Let's go ahead and publish that just so I can show you that this is actually a functional website. Um can now go to this link and we can see the entire website built out. It has animations. It follows the style guide that I had created as well which is really cool. and I'll be able to continue to add very cool little features as well from here. So, this is pretty amazing. But from here, what you're going to want to do is come back into Web Flow and you're going to want to adapt things. For example, here inside the navigation, there is a logo. We're going to want to replace this logo. Bang. There we go. Okay. Now, I'm going to start adapting the copy if I want uh closeboard ideal customers with personalized outreach. But this is not it. This is really an amazing way to come to a really beautiful website incredibly quickly just like this with animations etc. However, now I want to add an additional touch to this. So let's say that I wanted to bring in something really impressive. So the first thing I'll probably do is start bringing in some of my own designs, right? So implementing these, we can also do this directly in Reum before we import by the way. But I do want to just show u what's possible once you're inside Web Flow 2. So now let's say that I wanted to for example change this section. And let's say that this was a section where I wanted to now replace this. I'm going to start importing some of the um actual assets that I have here. So here I would just upload a design I had. Boom. Now I could upload that. Okay. Now maybe I want to take off this. I could change the copy here. Get more booked meetings. Excellent. It's looking a bit nicer here. But now let's say we want to add some fancy stuff to it. We want to add some 3D animations. Could easily do that right here. So basically here on the left hand side we can go ahead and add elements. So over here I can add an element and there's a specific element I find amazing which is a spline scene. It is a 3D scene. So for this I would go to spline.design over here and I would basically check out some animations that I'd like. At spline you can create these from scratch or you can grab pre-existing ones. Oh, I like the mockup of this iPhone right here. Yes sir. This looks pretty fancy over here. Let's go ahead and duplicate this file because I want to use it. You can fully adapt this file. By the way, once you remix it, now we come back here, export. We're going to go ahead and uh adapt the play settings. And then we're going to come here to the viewer and we're going to grab this link specifically. Then we're going to come back here into Web Flow and we are going to adapt this inside the spline scene. Okay, look at this. Now we have a beautiful 3D iPhone as part of this website. And as we scroll up and down, you can obviously change these animations, but it's all 3D. As you can see here, it looks absolutely beautiful. And this is what I really call the cherry on top. So, make sure that you have all your key features, but once you do, you can have 3D elements that will really make your website absolutely pop. And now, as you can see, we have a beautiful website. Obviously, we would have to connect some of this. We have some animations. We have a beautiful 3D cell phone here that we can actually put a an image of the app inside here if we're actually talking about a mobile app. As you scroll, you see that animation disappears. And then we get into this section where we have more information. And that's how with these three tools, my friends, you can build incredible websites. But if you're looking to build an app, there's a different set of tools that's going to be valuable for you. And here, my friends, are the five best AI builders to actually get your app off the ground. So, if you'd like to check out this video, I would highly recommend you to do so.