Build and Deploy a Modern UI/UX Website with React & Tailwind CSS

are you finished building those basic websites that even AI tools like vzer can quickly spin up now is your time to flex and build a modern landing page with smooth animations that stand out from other let's be honest outdated and boring sites this is our top uux video yet and probably the best one you'll find on YouTube let's take a look at the final application you'll build to Future proof your skills presenting brainwave a modern AI app you'll build a beautiful hero section with different shapes reacting to your curs a Navar with a colorful button that transforms into an animated hamburger menu when you're on smaller screens and look at that subtle smooth scroll Parallax effect that moves these elements down as we scroll moving on we've got a nice Services section featuring gradient borders on the cards and unique curved rectangle shapes each of these cards also reveals a hidden background image next we have a pattern that showcases the most important elements in a circular layout after that is a very fresh and modern web development layout called Bento Box many popular companies like apple linear and clerk use this layout to display their features effectively below there's an always needed pricing section after that there's a great style layout presenting the application's road map with gradients grid lines highquality images and geometry lines on both sides creating a modern look lastly there's a simple footer where we connect to the website social media pages of course everything's 100% mobile responsive which makes this a perfect tutorial to learn not just how to code a design like this but also the best practices of responsive front-end development which will save you hours and make you a front-end machine this is the best time to go beyond the basics and make something cool and creative to show that you're at least one step ahead of AI tools and for that we have to thank our friends over at UIA their creativity made this special design possible this video features just a couple of screens out of 44 pre-made screens and hundreds of components check them out the link is in the description and if you're still wondering if you should learn how to build this trust me you really should JavaScript knowledge is required and I highly recommend taking our Tailwind CSS crash course before watching this video the first step in building our app is setting up our hosting I want to teach you how to deploy this incredible app to the Internet so everyone can see what you've built see the app you'll build today isn't just a project it's a career asset it's designed to Showcase everything you're capable of making you an attractive candidate for any job I highly recommend hostinger for this app they're offering an amazing deal right now I'll go for the business plan here's why it's perfect for this project you get up to five times increased performance free SSL for https security which builds trust with anyone visiting your website you also get a free domain name giving your website that professional touch and a free CDN to speed up your site it ensures that your website loads quickly improving the user experience experience and because we've partnered with hostinger you get an even bigger discount so click the special link in the description click claim deal and add to card here we have to choose the period of our hosting and I'll choose 48 months to save the most down below you can choose your payment method and enter your JavaScript Mastery coupon code which gives you the biggest available discount on your hosting package and once you purchase we are ready to set everything up right within hostinger guided setup it's as can guess what tool we want to use WordPress with AI or the hostinger website builder in this case we are real developers so we're going to click skip as we want to develop our own website and I love this UI as you can see I'm using hostinger to host our official JS mastery. proo website there you can check out our ultimate nextjs course or if you're a bit more advanced the JSM master class but for our brainwave let's try to think of something unique I'll go with jsmb brainwave and in this case theom domain is is available and it's completely free for the first year let's click next and once your domain registers you'll also be able to choose where your website target audience is so that way it loads fastest for them I'm going to leave it as the default and click next and just like that our hosting has been set up now let's actually develop our application so that at the end of this video we can deploy it using our new hosting and domain name to start developing our fantastic project we'll start from bare Beginnings by creating a new empty folder on our desktop we can call it brainwave and simply drag and drop it into your empty Visual Studio code once you have it open up your terminal and we can get started first I'll teach you how to set up your react project using vit and then we'll set up Tailwind CSS which will allow us to style our applications much more easily so to get started you can head over to tailn css.com click get started then go to Quick Search and type vit click install tailin CSS with vit and let's follow the steps first we have to create our project so let's just copy this Command right here paste it within our console but then instead of my project type do slash which will create this project setup within our current repository press y to install create V CLI and then as you can see right here run mpm install to install all the necessary dependencies and then run mpm runev to run our project on Local Host 5173 and there we go we are live with v and react now let's follow the second step in our guide which is to install Tailwind CSS so let's copy this command stop our terminal from running clear it and paste what you copied mpm install DD tailin CSS postcss Auto prefixer and then later on after that MPX tailin CSS in it- P once you do that you'll see some new files appear next let's follow the other steps as well such as configuring our template paths so copy this content part and let's head over to tailin config.js that is right here and modify the content that way it will know where to find tailb and CSS class names next we have to add our tailin CSS directives so copy this head over to Source index. CS s remove everything from here and simply paste the Tailwind CSS directives then as the application says run mpm runev one more time and let's make some changes to our app.jsx such as by adding this H1 that says hello world so if we go right here we can remove what we have right now and just replace everything with a simple H1 we can remove the count the logos and everything else that's in here the only thing we need is the import of the app CSS and this hello world back on our Local Host 5173 you can see that it is bolded and underlined which means that Tailwind CSS is properly reading our utility class names such as text 3 Excel font bold and underline and it's applying specific CSS properties if this popup is not appearing for you telling you exactly which CSS styles are getting applied that must mean that you don't have the Tailwind CSS extension so simply type Tailwind under extensions and install Tailwind CSS intellisense with that in mind you've successfully set up Tailwind CSS with your simple V project now let's focus on formatting a bit to ensure that our codebase is always clean and readable you can create a new folder within the root of your application called vs code within there create a new file called settings. Json doing this we're specifically applying L some settings just for this project in the workspace it won't work for all of your other projects this is very handy to use if you have different settings for different projects you're working on and for this project specifically I have created a configuration that uses prettier that my entire team and I use when creating these projects so you can find it in the read me of this project copy it and then paste it right here it's going to apply some prettier properties like tab width single quotes and more now if you go back to your app.jsx and if you modify something or just press save you'll notice how automatically it will format it based on its properties this will ensure that you and I always have the same exact code the next thing we'll do is create a file and folder structure to make it easier to develop our application in the future so you can head over to source and delete the app.css as we won't need it and remove it from app.jsx all of the Styles we'll use will be within the index.css next we'll update our Tailwind doc config.js with the colors we'll be using throughout this project this file will also be in the read me down below so simply copy it and then override what we have right here you can see right here that we're adding some special class names such as H1s H2S and so on as well as we are adding some special font families and colors that's more or less it this will be very helpful later on as we won't necessarily have to say use the Coler ac6 a rather we'll be able to declare it in a simpler way another special thing that we've done here is this plugins part which you can see here this allows us to Define some of the components that we can then later on use within our application such as the H1s we want all of our H1s to have same exact Styles which is why we apply these specific properties to all of the components that use the H1 class names next we want to go inside of the index. CSS and also in the read me you can find the updated file and override this one right here here we provide some special class names for rotations for some animations we'll have but more or less we simply import and set the fonts and another thing we can do here is declare the color scheme to be dark as most of our application will have dark color now if we go within our application it's going to look something like this so now that our Base Class names are set up we can start focusing on the file and folder structure but don't worry you will still write all of the Styles these are only some baseline classes so what we can do next is open up our terminal and open up a new terminal tab inside of which we can install react router Dom by running mpm install react-router-dom then we can go to source and main. jsx and we can wrap our entire application with the router by wrapping your app right here with the router which is coming from react router Dom like this we have to close it of course and indent it properly which prettier will do for us which is great now it's not router right here that we have to import rather it's the browser router as router coming from react router Dom great this is exactly what we want next if you go to your browser you can notice how you have this default v logo we want to make this a real fabicon corresponding to application UI such as this one brainwave to do that you can delete the existing assets folder within the source folder and then in the read me down below you can find the assets folder containing all of the images and icons we'll be using throughout this project so simply download it unzip it and then drag and drop it here within the source folder and if you expand it you'll see a lot of different images all sorted within their own sections you can also see that we have our brainwave SVG which is the actual icon we'll use for the favicon great now we want to head over within our index.html and we can modify our link icon from from v.svg to something like SRC or slsrc slets for/ brainwave symbol. SVG we can also modify the title to say brainwave if we save it and go back you can see that our meta taags have modified now we have this brainwave icon as well as the brain wave title which means that we are ready to start setting up our application scale skeleton meaning the structure for where all of the components will go great job on setting up a react project using V Tailwind CSS formatting and the base file and folder structure to get started creating our layout we can navigate over to our app.jsx which will be our homepage here we can declare our app using the es6 plus const function like this and then we can wrap our H1 with something known as a react fragment that looks like this so we have a react fragment allowing us to add more elements right here and of course we have to close our return now below our H1 we'll render something known as a button gradient and to get access to this button gradient we can say import button gradient from SL assets SL SVG SL button gradient like this this button gradient is an SVG through which we're giving the gradient effect to the button if you hold command and navigate into this button gradient you'll see different linear gradients they're going to be used within buttons we're giving an ID to each one of these linear gradients so we can then later on consume them within our code so what do you say that we start off with a button component so I can show you how we're going to consume this button gradient we can create a new component Within a new folder called components and within components we can create a new file called button. jsx within our button we can run rafc which will create a new react Arrow function if this didn't work for you that must mean that you don't have the es7 react Redux react native Snippets installed so install it and try again now we can import this button within our ABJ ASX just to test it out so let's put it within a div and that div will have a class name equal to we can add a bit of a padding top so like PT Dash and let's do a 4.75 REM whenever you want to provide specific values then you can use square brackets we can also on large devices provide a padding top of about let's do 5.25 remm and overflow of hidden within there we can render our button component which we can automatically import from components button it won't be a self-closing component we can give it a class name of mt10 for margin top and an hre of hash login and it can say something for now now if you go back to our Local Host 5173 you can see this simple button right here but we cannot yet see something we just see hello world that something is hidden because the button is just rendering the text that says button so what we must do now is transform this button into a completely reusable component this is why I wanted to start off this project with a simple button because if you can understand how to create complex reusable components on something as simple as a button then you can do it for more complex things as well so let's get started by making this button accept some of the props for example the class name or an href that we're passing here we can destructure the props and accept a class name as well as href and later on we also might want to accept a specific on click or some children that that button might accept or even pixel values or just color is it white or is it dark once we accept all of these values we can then render that button and we can just return it like we are doing here but sometimes let's say we want to make our button a link and sometimes we want to make it a real rectangular button to make that happen we can render two subfunctions called con render button which is equal to just an arrow function where we have an instant return keep in mind these are parentheses not curly braces where we just return a button component and this button component will render a span element rendering the children like this and it will also render a special button SVG component so we can do it like this button SVG to which we pass the color white now this button SVG of course has to be imported so import button SVG from from that/ assets SL SVG SLB button SVG and finally we can return the render button component and call it like so and of course we have to make sure that our path is correct so just add an additional dot right here to ensure that we have the correct path now back in our browser you can see that we have something that resembles a clickable button but right now it is within hello world so let's continue mod the Styles further I'm going to put our browser to the right side of our editor and that way we can see exactly what is happening now when we're rendering this button let's give it some additional classes by creating a new property at the top cons classes is equal to and we can start defining them here but before we start defining them let's use them within our button by simply saying class name is equal to classes now if we give it a a class name of something like a button you can see that it's automatically getting applied right here something now let's make that something a bit more interesting let's make it relative let's make it inline-flex let's give it items D Center justify Das Center h-11 for height transition Das colors on Hover we want to make it text- color-1 now if we passing some specific pixel values like this pixel coming from props coming from the parent component then we're going to render it else we're going to render a default of px-7 next if the white is true then we want to render a text n of 8 and else we want to render a text n of one and finally if we have the class names we're going to render them else we're going to render an empty string this this way we ensure that all of the properties that we pass from our parent component into our button indeed get passed to our button you can see that from our app we're passing something like padding top we're passing a margin top of 10 and if we give it a margin top of 20 right here you can see how it changes it this is how you make reusable components now I will go a step further here and make it even more reusable I'm also going to find const span classes and I'm going to give it relative and Z index of 10 we can also now apply the class name to the span element that way we can change and modify the text within it now what if we don't want to render a button such as this one what if we want to render simply a link well we can create a new function for that by saying const render link and then we can have a return statement an automatic one again where we have an anchor tag like this that will have an HRA of href because this is a clickable link and we still pass over the class names from classes and then the span and the button will be exactly the same so we can simply copy it here and now that we have render link and render button we can choose when we want to render each one so right here we can say return if the href property exists then we can render the render link like this else we can return the render button there we go in this case we did pass the hre so of course in this case we will render a link but if we now remove the href if we make it a regular button you can see that it will look something like this all completely reusable and we'll be able to expand on this component even later on and make it more Dynamic for now this is good enough I just wanted to teach you how to create reusable components now let's create another component which is more important than the button for now which is the header component so we can head over to components and create a new header. jsx we can run ource we can remove this import from react as it's no longer needed and within our app we can remove this button we no longer need it but rather we can just surrender the header coming from that/ components slhe header and we can also remove this H1 the reason we have this padding top is because the header is fixed and we don't want it to overlap with the content so at the top will'll show the knv bar with that in mind we can head over to the header and start creating it we can start with the structure by returning a div element like this that has a class name equal to fixed top top- Z and this will pin it to the top zindex of 50 to appear on top background of N8 over 990 backdrop Das blur Das small this is a CSS property that adds elements backdrop it will kind of give it that glassy look we also want to give it a border dasb for Border bottom border D n-6 this is a border Coler and on large devices background of N8 over 90 and on large devices backdrop of blur DSM now we cannot see anything yet because this header has no content but as soon as we add the header you can see it here within this div let's create another div that div will have a class name equal to flex items Das Center padding X of five on large devices padding X of 7 .5 on extra- large devices padding X of 10 on Max large devices like this we can give it a padding y all four for top and bottom immediately within here we want to render an a tag an anchor tag that will render the image off source is equal to brain wave and this brain wave has to be imported from our assets by saying import brainwave from do/ assets there we go that's better already let's also give it a width of about 190 and a height of about 40 with an Al tag off brain wave this anchor tag can have a class name equal to block W of something like 12 RM on extra large devices margin right of eight and an H ra off hash hero like this this is an ID used for navigation we want to specify what happens if we click it and in this case if we click it we navigate over to the hero section now I can notice this is a bit too close to the left side of the screen and I can notice that I didn't put it within this inner div so let's move it over to inside of the div we created not that long ago there we go that's much better now below this anchor tag still within the other div we can create a nav element and this nav will have a class name equal to hidden fixed top property of five REM left zero right zero bottom zero as well background of N8 on large devices static on large devices Flex on large devices margin X of Auto and on large devices BG of transparent and of course I have to spell the class name properly with a capital N now within this nav we can create a div to create some layout this div will have a class name equal to relative Z of 2 Flex flex-all items Das Center justify Dash Center margin of Auto so M Auto and on large devices Flex row and within it we want to show all of our items such as 1 2 3 and so on right now we cannot see them because they're dark and for that reason to more easily map over our nav items we can create a new folder within our source called constants and within the constants we can create a new file called index.js in the read me down below where you found all of the other class names you'll also be able to find this constants file so simply copy it and paste it over here now you might wonder 300 lines oh my God is this our entire application coded for us but not really no this is simply different lists of content of text that we'll be using throughout our application such as when we're going over the pricing section I don't want you to hardcode all of these values rather we'll extract them from here and then map over them similarly we're doing that for our navigation bar so if you see the navigation immediately here we create different link items with a title URL and the ID so now we can go back over to the header and we can map over them we can do that by scrolling over to the top and importing in curly braces navigation coming from. SL constants now we can use that navigation right here by using a dynamic block of code called navigation and then mapping over it by saying that map where we get each individual item and for each item we instantly return something and that something is an anchor tag this anchor tag can render the item. tile and it will have a key equal to item. ID as well as an href equal to item. URL so now we're mapping over all of these properties and we're using the URL and the title but if you save it we cannot yet see it and why is that well that's because this nav is usually hidden so if we expand our browser you'll be able to see it right here features pricing how to use road map new account and sign in so we can keep this view right here while we're styling them let's also give this anchor tag a class name this class name will be dynamic and it will first turn each element into a block then it will also give it a Rel relative a font Das code which will apply a special font family text- toxel to make it a bit larger uppercase of course because we want to be able to click on these links easily text- n-1 to change the color transition Das colors and on Hover text- color-1 of course make sure to apply to the hover element and now if you hover that's already much better we also want to turn on a special property called item.on mobile so some of these properties will only be showing on mobile and if that is the case then we can do LG hidden which means we can hide that item on desktop or we can just apply an empty string which will look like this now we can continue with the styling by giving it a padding X of six to create some space Ing we can also give it a padding y of six on medium devices we can give it a padding y of eight on large devices we can give it a minus margin right of 0.25 on large devices text- Xs and on large devices f- semi bold as well this will make it look like this a bit smaller next we have to figure out which link is currently clicked meaning are we in features or are we on pricing to do that we can use a special property called use location from react router Dom by importing in curly braces use location coming from react router Dom then right at the top of our component we can say const path name is equal to use location and this will give us access to the current URL we're on with that in mind we can scroll down and within the Styles we can check if the item. URL is triple equal to the path name. has in which case we can apply a zindex of two we can apply on large devices a text- and-1 and if that is not the case we can then give a class on large devices of text- and-1 over 50 so now you can see all of them are grayed out besides pricing or features or how to use this works for all of the links next let's also give it on large devices a leading of five which will increase the line height and on large devices and hover we can also give it a text n of one and on extra- large devices we can give it a padding X of 12 so now we have something that looks like this great finally on the right side of the screen we want to have a sign up we're trying to replicate this we want to finally use this reusable button component we created not that long ago so we can head over below our div and below our nav and create another anchor tag that will have an href equal to Hash sign up and it will have a class name equal to button hidden margin right of 8 text- n-1 over 50 and this simply allows us to apply this Coler we have declared in tailin CSS config transition Dash colors which will apply a nice transition once we hover over it and on Hover we want to modify the text Coler to N1 as well as on large devices set it to block within this anchor tag we can say new account there we go we can see it here and right below this anchor tag we want to create a button or rather we want to use our button component we have created not that long ago so we can at the top just import it by saying import button from SL button this button will have a class name which will be hidden usually but on larger devices and larger it will be visible and it's going to have an href off hash login and it will say sign in if we save it you can see how nicely it appears on the right side now now we're almost done with this desktop nav bar but I can notice that it's not going all the way to the end of the screen so if we head over to our first div we can see if we properly applied all of the classes toab zero oh we're also missing the left zero right here to ensure that it's positioned on the Zero from the left and we're missing a w- full it's for it to take the full width of the screen this is more like it we have the primary navigation we have the new account and sign in and if we expand it this is looking wonderful on mobile devices exactly the same as our deployed application but unfortunately there's absolutely nothing on our Mobile screen that's because we'll Implement a completely custom mobile menu which looks like this you can open it and you can close it so to get started creating our mobile navigation I'm going to help you to create the circles behind the actual navigation ation you can see these circles and these little icons let's make that happen first and to make that happen we can go to our file explorer and from the read me down below you can download the design folder unzip it and then drag and drop it within our components folder within our design folder you'll notice that we have a header. jsx file and here we have things such as Rings Sidelines background circles hurger menu and we're then using all of them right here within our app I think you can understand what those are rings are the Rings you see around background circles are those bows that you can see around as well and Sidelines are those vertical lines you can see here and here the reason I wanted to provide you with this code is because all of these are hardcoded values that we can play with and find the ones that work accurately for us it's just absolute positioning more or less but if you think this code is confusing and if you're wondering how to properly use the absolute properties I would highly recommend to check out the absolute positioning inside relative positioning guide by CSS tricks the link will also be in the readme with that in mind we can now go back to our original header and we can import two things one thing is to import the menu SVG coming from assets SL SVG SL menu SVG and the other thing is to import the hurger menu inside of curly braces fromd design forward slhe header and now we can neatly combine this mobile menu with the desktop menu we had before so let's create a new Ed State at the top by using the Ed State snippet let's call it open navigation and set open navigation and at the start it will be set to false then we can modify this div by turning it into a template string like this and then checking whether we are currently open or Not by saying if open navigation like this then provide a BG off N8 else provide a BG of N8 over 90 and a backdrop blur small like this so now we of course have to import US state coming from react and if you do that you'll get an error saying that the hamburger menu does not exist that's because we misspelled it right here hamburger menu it's missing an R right here Burger once you fixed that and reload we're back in Action so now let's go below this div that's wrapping our items and right here let's render a hamburger menu a self-closing component and also we have to make it show by going to our nav and modify the class Name by once again making it a template string close it with a template string as well and then in here we can check if the navigation is currently open so if open navigation in that case we can make it Flex else we can make it hidden and then we can remove hidden from here now it's obviously false but if we turn it to true you can see the navigation menu of course we're going to leave it to fals by default but now we want to go over below our signin button and add a new button this button will render the menu SVG so it will look something like this it will have the class name equal to margin left of Auto and on large devices it will be hidden margin left Auto will align it horizontally right here we can also provide it a pixel property of PX 3 and to this menu SVG it needs to know whether it's opened or closed so we can provide it the open navigation state of course we want to somehow turn it on or turn it off like a toggle switch so right here we can create a function called const toggle navigation that is equal to a fun function that checks if the navigation is currently open in that case we can set open navigation to be false and else we can set open navigation to be true also we can declare a function called const handle click and once we click something we want to set open navigation to false because the last thing you want is have something opened and then once you click on it to then have to go and close it you want everything to be closed automatically once you click so now back in here let's attach this toggle navigation to our menu button by giving this button an onclick property of toggle navigation if we save it and if we click here oh nothing seems to be happening but if we manually switch it to true you can see that it works so that must mean that something with the toggle navigation function is not good let's see if we're properly using this onclick property within our button component and would you look at that this reusable component button hasn't yet learned how to use the onclick so we can simply pass it to this button by saying on click is equal to onclick now if we go back back and click here you can notice that it opens it although it's not looking exactly the same as the finished application right so let's see what's wrong with the layout this hurger menu should have been rendered below this div right here that way we can close the div and then have the hurger menu this will fix it just a tiny bit I also think we forgot to pass an onclick listener to each one of our navigation items so we can do that by saying onclick is equal to handle click we'll most likely have to look into our div that's wrapping our entire nav or our entire header so let's see fixed top Z index that's good we can remove this Coler from here as we're changing it in the open navigation backra blur SM we can also remove it from here and let's see if that fixes it and it does this is great we have our vertical lines we have our linear Rings everything is looking great and we can open and close our mobile menu as you can see the only thing we've done is we've used this header component which then goes over the Rings Sidelines and background circles which are basically nothing more than absolutely positioned values sometimes beautiful designs like these which you might think how the hell did they do that well they simply use absolute positioning so now you know the tricks now another important thing we have to do with this mobile navigation is Implement a special package called screen lock it's this package right here and the only thing we'll use it for is to disable page scrolling this is for mobile devices this will ensure that once you open up the page you cannot Scroll once you're here rather once you click somewhere then the page will scroll automatically to that element so let's install it by going to our terminal and running mpm install scroll lock let's go back to our header and let's import disable page scroll and enable page scroll which can be imported from scroll lock finally once we toggle the navigation off we want to enable the page scroll so we can once again scroll make sure to put the p as upcase as it has to be so to enable page scroll and once we turn on this mobile menu then we can disable page scroll like this also once we click on a specific element if not open navigation so if it's closed then we simply want to return we are not allowed to click then and here we can just enable page scroll and set navigation open to R because that means that we clicked and we are ready to go somewhere else and Scroll once again and with that in mind you have successfully implemented your first major component the header not only this beautiful mobile header that looks like this with absolute position values that once you click it leads you to a specific section but also this great desktop header which looks like this you have the logo on the left you have some links in the middle you have the new account and sign in on the right this looks clean but what's even cleaner is this phenomenal modern hero section with this nice looking image a great heading and a cool to action button so without any further Ado let's get started not only with creating our hero section but by creating a reusable section component which we'll use for all of the sections to come to start creating a reusable section component we can start creating it like we would any other component by creating a new component within the components folder called section. jsx where we can run our afce to get it up and running this component will act as a common skeleton which will reuse in all section components this component will create all the lines between different components so to start working on this component let's first accept some props such as class names or class name the ID of the section the crosses whether we have them or not crosses offset soon enough you'll see what this is custom paddings and children once we have that we can return our div and to that div we can provide some class names by giving it a class name of and we want to make it Dynamic so we're going to do it like this and give it a position of relative check if we have custom paddings and then also provide all the other styles such as padding y of 10 on large devices padding y of 16 on extra large devices padding y of 20 then if we have crosses so if crosses then on large devices we can give give it a padding y of 32 and extra large of padding y of 40 else just render an empty string finally if we're passing some additional class names we can just render them here or else just render an empty string now within the section we can render the children so we can say children right here meaning whatever we pass into it will be rendered right here and we can also create the divs for the sidelines let me show you what those are so in the finished website if we go right here you can see those lines this one right here with those two crosses so we want to differentiate our sections in this very very interesting way so to do that I'm going to collapse her browser to mobile view and I'm going to create a div that will usually be hidden so it will have a class name of hidden it will be absolute top zero left five with a width of 0.25 h- full and BG off stroke -1 pointer events none on median devices it will be block meaning visible and larger and on large devices left 7.5 to move it a bit away from the left corner and on extra large we're going to give it a left off 10 similarly we can duplicate this one and make it the same but for right devices right 7.5 and right 10 and we also want to handle those crosses that you saw before you cannot see them on mobile devices but you can see them on desktop devices so let's create a new Dynamic block of code where we check for crosses and if the crosses exist we render a react fragment that has a self-closing div this div will have a class name equal to it will be a dynamic string of hidden absolute top- Z left- 7.5 right- 7.5 as well h- 0.25 for the height BG Das stro-1 and a dynamic block of code if crosses offset exists then we render the cross offset like this also we're going to give it pointer events none and what this does is this disables all the pointer events so we cannot click it on large devices we will show it so it will be block usually it will be hidden on extra large we'll give it a left of 10 and right of 10 usually like this now if we go back to our website still nothing is happening because we haven't yet used this section and we will use it very very soon but before that we want to import those crosses at the top by saying import section SVG from SL assets SL SVG SL section SVG and then we can use it right here if we have crosses below this div by simply saying self-closing component of section SVG to which we pass the crosses offset if it exists there we go so now we ready to finally use this section and before we use it you can see that we have one warning right here and that is that the class name is missing in props validation this is just an eslin warning which we can fix if we go to eslint rc. CJs if we go to rules and then add an additional rule that's going to say react slpr types will be set set to off like this and of course we have to close the string here and now if we go back to our section you can notice that it's no longer complaining it is now just giving us a proper warning that the ID is not being used and we do want to pass that ID over to this div ID is equal to ID and finally we are ready to use this section within our application and what other section will we use it for rather than our hero section so let's create a new component within the components folder called hero. jsx just run rafc and let's immediately consume it within our app.jsx just below the header we want to render a hero section looking like this hero there we go that's pretty simple right now we can go into the hero and we can start developing it the interesting thing here is that we're not going to wrap it in a typical div rather we're going to wrap it in our section which we have created just before so we can import this section coming from SL section and if we save it you can notice how it pushes it down just a tiny bit and if I expand it you can also notice that it applies some vertical lines although it's very hard to see right now it'll be easier to see as we pass some additional properties to it for example Le I'm going to return this properly so it's easier to see and I will pass our section some more props that it wants such as a class name of padding top of 12 REM and minus margin top of 5.25 REM I found those values to work the best you can see how it shifts it and we can also continue adding some more properties such as crosses as well as a crosses offset property of large Translate Y of 5.25 REM like this we can also give it a property of custom paddings and we can give it an ID of hero as this is our hero section if we save it and expand our browser you'll see that not a lot is happening right now we cannot see any crosses or anything that's because we don't yet have enough content Within our hero section so let's change that let's wrap our section with another div and this div will have a class name equal to container and relative within this div we'll create another div and that div will have a class name equal to relative Z of One Max DW of 62 R MX Auto this is for margin horizontal Auto and this will simply align all of the elements horizontally we can also give it a text Center to show the text in the center we can give it a margin bottom of about four Ram to provide some spacing on medium devices we can give it a margin bottom of 20 and on large devices we can give it a margin bottom of about six REM as well finally within this div we can create a new H1 that will have a class name of H1 this is a special class we created before as well as a margin bottom of six and within that H1 we can say explore the possibilities like this and we can also copy whatever else we say here explore the possibilities of AI chatting with brainwave so let's simply copy it paste it here the deployed website will be mentioned in the description down below so you'll be able to copy all the content from it and then within this H1 we also want to create a span element and this span will have a class name equal to inline-block and also relative here we can say brain wave now below brain wave we want to also render a self-closing image tag this image will have a source equal to curve and this Curve will be coming from assets it will look something like this and we can also give it a class name equal to Absolute top- full left- z w Das full and on extra large devices we need to reposition the bit to fit below brain wave to minus margin top of two there we go we can also give it a width of about 624 and a height of about 28 I found those values to work the best alongside with an Al tag off curve now we can head below this image below the span and below the H1 and we can create a P tag which will form our subheading that subheading will contain all the text below which will be this one you can just copy it and it can say Unleash the Power of AI within brain wave let's style it a bit by giving it a class name of body D1 let's also give it a Max dw-3 excl margin X of Auto margin bottom of six text- n-2 and on large devices margin bottom of eight right below this P tag we want to show a call to action button so it will be a button component which we need to import from that slash button I did that automatically right here at the top and that button since it's our component we can pass it on HRA of forward slash pricing and we're going to give it a special property of white and then we can say get started there we go now we have a white button now this button is not looking great right now you can see the text is not centered so let's go into the button and let's see if you apply white why is it not centered and usually it is it looks like our classes are just a tiny bit wrong so we do all the great stuff such as inline Flex relative item Center justify Center as well then we apply padding and then we have this white property where we apply text N8 or text N1 and then after that we apply a class name the issue is the typo I have right here where it says inline it rather should be in line and there we go now our button is fixed as well now below that button we can start creating the rest of the structure which is quite exciting so we can go below the button and below the div and create another div which will be the container for the rest of our hero section with a class name equal to relative maxw d23 Ram margin X off auto on medium devices Max dw5 XL so it has a lot of width and on extra- large devices margin bottom of 22 within that div we'll create another div to keep building out that hero structure with a class name equal to relative Z of one padding of 0.5 rounded Dash to Excel and we also want to apply this BG Das conic Das gradient within that div we want to create another div and that div will have a class name equal to relative BG D n-8 rounded D1 REM like this and within that div trust me this is the last one we're going to create a self-closing div that will have a class name equal to h- 1.4 Ram BG off n10 rounded dt- 0.8 REM that's going to give it this great rectangle and below it we can have a div within which we'll show this great looking robot image with a source equal to robot coming from do/ assets we're going to also give it a class name equal to w- fo we're going to give it a width of about 1440p and a height of about 1,800 pixels with an Al tag of hero as in hero section that's looking great now let's style the div wrapping the robot it will have a class name equal to aspect d33 over 40 this is the aspect ratio and let's of course call it div as it is then let's give it a rounded dasb of 0.9 REM like this let's also give it in overflow hidden so we cannot scroll through it and on medium devices let's modify the aspect ratio so aspect Dash 688 over 490 I found those values to work the best and on large devices we also want to play with it a bit by saying aspect das24 over 490 this will make it look good on all different kinds of devices and screen sizes now let's go one two three divs down and below it we're creating one last final div and and within that div we're creating the image that will be the hero background so here we can say Source equal to Hero background coming from do/ assets let's give it a class name equal to w-o and looking at it right now I think I provided the class names of this image to the image above so we want to take this width and the height and the AL tag from the robot over to this below one so we want to do it like this width 1440p height 18800 alt is hero and that's going to give us this great looking background for now this background appears below the robot but soon enough it will look like this it's going to come from behind it to do that let's add more properties to our robot such as width of 1024 and height of 490 and I'll tag of AI now now let's add the class names to this div wrapping the hero Background by giving it a class name equal to Absolute minus stop minus or Dash 54% this will make it appear below or rather behind this image we can give it a left- 1 over2 which will move it a bit away but then we can give it a width of 234 per. which would make it a bit larger we can also then use the translate property so minus translate specifically DX 1 over 2 that's going to look like this and now it's going to appear right behind it then on medium devices we want to play a bit where we show it so it's going to be minus stop- 46% like this on medium devices W will be 138% and on large devices minus stop- 104% there we go so now we have this beautiful looking hero section as you can see and if we expand it you'll see that it's looking great but not perfect as it says curve right here we want to remove that part where it says curve rather that is just the actual component or the image there we go and if we compare it with the finished product we're still a bit off right it looks a bit different so going back now we can make the fixes for desktop devices here we're missing the positioning in Rams you can use Rams you can use pixels whatever you prefer this one is 84 pixels and it seems to me that the image is definitely not looking good so it's not positioned correctly as you can see right here so let's scroll down to where we have our AI robot and let's provide it some class names other than W fo for example we can give it a scale of Dash 1.7 a translate of Y of 8% which will bring it a bit up and then we want to play with that scale and translate on different devices such as in medium we can set the scale to be one on medium we also can do the minus translate dy- 10% and on large devices we can do a minus translate of Y of 33% so now if we save it you can see that it looks much closer to the final design although we're definitely missing some space between our header we're much closer than we were before as you can see on the final website we have these moving circles which we already implemented before as well as these circular rings that go in the middle of the screen so let's implement it to start implementing it we'll get some help from the package called first we have to install it react just Parallax so react Parallax and then we'll use the same Rings we have used before from design but this time in the hero you can see gradient bottom line we have different rings and all of that is being displayed within background circles and these little things within thises that are mounted these are the balls that you can see flowing around so now to implement those rings and circles and everything we can head over to the hero section that we have developed and we can import everything we need we can import the background circles bottom line as well as gradient coming from do/ design slh hero we can also import something known as hero icons coming from do/ constants and let's not forget the Parallax we can import the scroll Parallax coming from react just Parallax and it looks like we have to fix the import for our hero we are right now within hero so it's going to be just slash design hero there we go now to make it work we can give a ref to our div of the hero section by saying ref is equal to Parallax ref and we can Define that ref right here by saying con Parallax ref is equal to use ref which is a hook which we have to import at the start equal to null once we have that ref we can navigate over below our image of the robot of the AI and then there we can render the scroll Parallax coming from that package which we just installed there we can say is absolutely positioned which is one of its properties and we can render a UL or an unordered list within it we can give it a class name equal to Hidden absolute positioning as we said it will be a minus left of 5.5 REM a bottom of 7.5 REM pading X of one padding y of one background of n 9 over 40 backdrop blur border and Border - n-1 over 10 let's not forget to make it a bit rounded of to XL and on extra large devices it will be Flex now within there we'll be able to show all of these different icons that you can see here floating around so if we go back within this Ur we can open up a dynamic code and say hero icons that map where we get each individual icon and an index for that icon and we can immediately return An Li that has a class name of padding of five so P5 and a key equal to index and within it we render an image that has a source equal to Icon a width of about 24 a height of about 25 and its alt tag will be equal to just icon now if we save this you can see this menu appeared later on we can make it clickable as well and you can see how it flows we have this Parallax effect which is really cool and it is done by the library we installed two devs down below that Parallax we want to render a self-closing gradient component which looks like this and this will give it this nice looking gradient to make it really pop and then going below this back background hero that we have here specifically one div below the image we want to render the background circles which we also created not that long ago and this will make it move like this now this hero is looking much closer to the finished website let's see where is it missing some top margin from if we check out our hero section here we're giving it a padding top of 12 remm but if we go within the section let's see if we're actually implementing that class so if we really make sure that everything is nicely divisible we have relative we then start with custom paddings so if custom paddings are applied apply them else apply all of these Styles right here and then at the end apply class names now make sure that this code is exactly as it is here and then it will work most likely had a typo somewhere and if it still doesn't work you can refer to the finished section. jsx code so simply copy it and over R it but once that is done you'll be able to see that now our hero is looking amazing also notice that we're saying brain wave two times so if I go back to my hero section and look at brain wave we don't have to see it for the second time we have it within the span element and we have to provide some space like this so now it looks great amazing job building this hero section you can see that now it's very similar to exactly how it looks like on the deployed application we'll do some more improvements soon but even for now this is just absolutely amazing great work now the only thing that our hero is missing for it to be perfect are these little jumping add-ons these cards that go up and down where we can see what we can do within this AI app such as code generation and also this AI is generating also I notice we have a bit of a different text spacing so if we go to our deployed application you can see that AI is at the top whereas here it's at the bottom which has a bit of a nicer text hierarchy so going back to where we are saying possibilities of AI right before off we can render the N sign and say NBSB and then a semicolon and we can also put that after AI so let's just do it right here before and after AI that should be better so now if we save it you can see off space AI space and then chatting with but make sure that there's no space between semicolon and chatting with then it's going to look exactly like this which is now much more similar to this and also it looks like I misspelled possibilities great with that said we can focus on what matters which is implementing those flying add-ons to our robot screen so first let's focus on this AI is generating Tech T I'm going to go back to our code and if you look at here we have a bit of a warning where it says that the bottom line is never used so just before we Implement those little add-ons we can scroll to the bottom and right before we're closing the section we can also use this bottom line component now let's go back to the components and create our first flying component this one will be called generating jsx it's going to be a simple rafc component that's going to say generating and it's going to render only a single image and a piece of text this image will have a class name equal to W5 h-5 and margin right of four and we can also give it a source equal to loading so this will be our loader and this loader we can import loading from data that/ assets and then we can also give it an Al tag of something like loading and we can also say AI is generating now if we save that it's going to be nowhere to be found but now as soon as we style this div by giving it a class name equal to it's going to be a dynamic template string and it's going to have classes of flex items Das Center h -3.5 REM padding X of 6 background of N8 over 80 and rounded Das 1.7 remm finally it needs to render all of the class names that we passed to it so we can say class name here and then render class name or an empty string if we don't have any and we can also give it a text-base this will just provide it a tip typical font size and line height so it looks good now we want to use this within our hero section so let's go to our hero and let's scroll up above our scroll Parallax and here we can render the self-closing generating component which we of course have to import at the top by saying import generating from that's slash generating and it won't be within curly braces that's my bad if we save it we still cannot see it and that's because we have to pass some additional props or styles to it specifically we have to make it absolutely positioned by giving it a class name of absolute left D4 right D4 and bottom-5 now on medium devices we can modify the left to 1/ two and on medium devices we can make it wr- Auto on medium devices we can also modify the bottom to eight and on medium devices we can modify the width to about 31 Ram like this and on medium devices we can also use the dash translate or minus translate X1 over2 this is just to ensure that we properly position it on top of our image which you can see right now looks absolutely perfect later on we can even make this SVG spin so it feels like it's generating something and now the last thing we have to do is this code generation card and we can create it by creating a new component within the components folder and we can call it a notification. jsx we can run rafc and we can immediately use it within our hero it's also going to be within its own Parallax so let's recreate another Parallax scroll Parallax that means that it's going to move up and down it will be absolutely positioned and there we can render the self-closing notification component coming from that/ notification and we can also automatically pass some properties to it we can pass a class name equal to usually hidden but on larger devices will'll be able to see it absolute minus right- 5.5 REM bottom of 11 RM w-8 RAM for width and an extra large devices Flex meaning visible we can also give it a title of code generation this will be what the notification will say and now we can go into the notification and start creating it we can accept the props we're passing into it such as the class name and the title and we can start styling our div by giving it a class name equal to it's going to be a dynamic template string where we first render the class name or an empty string if it doesn't exist in this case it will because we're making it absolute we can also give it a property of flex items Das Center padding off four padding right off six background of N9 over 40 backdrop Dash blur to make it feel like it's glassy border border dn1 / 10 which is the color rounded -2 Excel gap of five and that's it already you can see this notification appear finally we can wrap it within a div that has a class name of flex -1 and there we can render an H6 this H6 will have a class name equal to margin bottom of one font D semi bold and justify between and it will render the dynamic title we're passing from props now it says code generation right below this ag6 we're going to create a Dev where we have a class name equal to flex items Das Center and justify between and now that I look at it this H6 doesn't need to have a justify between it's going to have a text base to modify its font size and line height within this inner div we're going to have a UL that will have a class name equal to flex minus margin of 0.5 and then within this we can map over our images of the users generating something with AI by saying notification images which we can import from constants that map where we get get each individual item and the index and we can immediately return An Li that renders a self closing image with a source equal to item a class name equal to w- fo a width of 20 and a height of 20 as well so let's fix it and let's also give it an ALT tag of item now if I save this you can see all of these different user avatars let's style them a bit by giving this Li a key equal to index and a class name equal to flex w-6 h-6 border of two border dn-12 and most importantly rounded Das full which will turn it into full circles and over overflow hidden so we cannot actually scroll through them there we go this is much better notice how in the final version we have this image of what they're generating so we can add that to our application as well by adding an image Above This div with a flex of one this will be a self-closing image with a source equal to notification one coming from assets with a width of 62 a height of 6 2 and then I'll tag of image there we go that's better already and we can also make it a bit rounded by giving it a class name equal to rounded DXL there we go the last thing we need is a text that says one minute ago so to do that we can scroll down and right below the UL we can create a div that will have a class name equal to body -2 and text- n-13 and it can say 1 M ago there we go now this is looking more like it it's Fuller and these things scroll up and down if you want to make the AI is generating also scroll up and down you can simply wrap it in this scroll Parallax in case you want to do that there we go so generating you wrap it into a scroll Parallax and save it and you can see that now it moves as well but now it feels like too much is happening I want to leave this here and only let those two move up and down so I'm going to bring this back to what it was great finally the last part of the hero through missing is helping people create beautiful content ad and then these different logos right here so that's going to appear below the hero section or rather still within it but a bit below so to create that last here component we can go to components and create a new file called company logos. jsx where we can run RFC and we can go back to the hero and immediately use it within here that's going to be all the way at the bottom below background circles below a div and then right here company logos imported from that/ compan logos and we can also provide it a class name equal to Hidden on smaller devices relative Z of 10 margin top of 20 and on large devices block so it's actually visible and now you should be able to see it somewhere here at the bottom but it's quite dark so you cannot see it so let's go into the company logos and let's make it appear exactly how it should be we can do that by accepting these class names that we're provid providing and then applying them directly to our div class name is equal to class name that will make it appear right here at the bottom then within this div we also want to render an H5 that will say helping people create beautiful content at and then we want to start listing those logos so we can remove this company logos we can style this H5 a bit by giving get a class name equal to tagline margin bottom of six text- center and text- n-1 over 50 that's much better and below the H5 we can render a UL that's going to have a class name equal to flex and it's going to render or map over company logos coming from constants map where we get each individual logo an index of that logo and we return An Li for each one of these that renders a self-closing image with a source of logo a width of about 134 a height of about 28 and then we can also say alt is going to be that actual logo if we save it you can see all of those logos at the bottom and to style it a bit we can give this Li a class name of flex items Das Center justify that Center Flex D1 and h- 8.5 REM and of course we have to also give it a key equal to index if we save it you can now see those beautiful logos and now we can say that our hero section is looking wonderful this is one of the most modern designs I have seen in the long time these circles or bolds move as you scroll but still they're not taking away your attention you have those circles or rings actually bringing your attention to this button into this image here these cards nicely float showing you what you can do with this software and then you get Instant improval by seeing other companies using this software as well now that this hero is spared with our wonderful Navar this is looking great and let's not forget that it's also looking amazing for mobile devices you can open it up you can close it scroll down and here we remove or get rid of some of the Clutter you don't want to show all of these cards if you don't have enough space on desktop devices we have space here we don't so we hide them so that is it for the hero section phenomenal job when coming this far but don't forget this entire time we haven't been just building the hero section or the Navar we set the foundation for everything else we're going to build we have the reusable section component which now creates these rectangular lines on desktop devices and we have also set up the entire file and folder structure so that now we can simply render an additional section below the hero section specifically the next one will be this one we're going to call it benefits where it says what you can do with this app such as ask anything improve every day connect anywhere or much more it looks great on mobile devices but it looks even better on desktop so let's go ahead and create the second big section of the day which is our benefit section and snap I just changed our Visual Studio code theme to make the video bit more interesting I switched it to a theme called one dark Pro whereas before I used this cpin theme what do you think of this one let me know in the comments down below which one you prefer but with that said let's continue with the video we want to focus on another big section of this video which is the benefit section so we want to add this tagline as well as these beautiful cards indicating different benefits of our application so to implement it we can create a new component within the components folder called benefits do jsx in there we can run ource and immediately we can import those benefits right below our hero so we can say a self-closing benefits which we can automatically import from components now if we go into the benefits we can start creating them and we should already see benefits right here at the bottom although it's quite hard to notice but we will be able to notice it once we wrap our benefits into a section component coming from do/ section this will give it some space and nicely position it on the screen we can also give it an ID equal to Features so we can later on scroll through it dynamically from the navigation bar and what do you say that within this section we also have a div with a class name equal to container relative and a z of two within this div we can render a special heading component this is a component that we haven't created yet so we can create it right away by creating a new heading. jsx component and run RFC then we can simply import it within our benefits just like this and now we can see heading and to this heading we can pass two props we can pass a class name prop allowing us to further style our heading and we can also pass it a title prop in this case it can say something like chat smarter not harder with brainwave and we can paste it right here there we go so now if we go back into the heading we can accept these class names as well as a title coming from props and we can use them when creating this heading so right here this heading will be a very reusable component it will allow us to use it as a tit tole as a subtitle as a large text tagline and it will take many more forms so right here we can check if we're getting the title and then within this div we can say title and and render an H2 that will render this title and we can also give a class name to this H2 to be equal to H2 now if we save this and go back you can see chat smarter not harder with brainwave we also can do something with those class names and specifically we can use them within our div so this div can accept a class name equal to it's going to be a dynamic template string where we can render the class name dynamically and we can also pass it some additional Styles such as Max DW of 50 REM margin X of Auto margin bottom of 12 on large devices margin bottom of 20 so now if we save it we can pass some additional class names every time that we call our heading and this is useful because you might want to call headings in different places so for example in this benefit section we can pass it a media query of medium Max dw- medium and in large Max dw-2 XL so now as we scale this text you can see how it will also change right here below great this is it for the heading but now we can focus on our benefits section so right below this heading still within the div we can render another div and this div will have a class name equal to flex flex-wrap gap-10 and margin bottom of 10 as well within here we can map over our benefits which we can import from do/ constants so if you now dive into these benefits by command clicking them you can see that this is a simple array with a couple of different objects specifically each object is a card with an ID a title text background URL icon and more so what we can say is we can now say benefits. map and we want to get each individual ual benefit we can call it an item and automatically return something for each one of those items let's make sure that we properly close it right here there we go and I think we're missing one more div right here there we go we also want to give this div a key equal to item. ID within that div we can create another div and within that div we can have an H5 that simply renders the item. tile so now if we save this and scroll down you can notice that we have five or six different pieces of text each one of these is a card even though right now it's just a piece of text we will create that card and we can do that by giving a class name to this outermost div this div will have a class name of block so each element is a block relative for relative positioning padding off 0.5 to provide some spacing BG Das no repeat like this BG Dash and now this is a special one we can give it a length by saying length 100% underscore 100% so now the background will take 100% of the size of this div and on medium devices we can also say maxw d24 RM now the way we'll apply that background image to each one of these cards is by using the inline Styles so we can say background image is it's going to be a template string of URL and then in parentheses dollar sign curly braces item. background URL so for each one of these cards as you can see we're getting a different background URL now let's style this inner div right here by giving it a class name equal to relative z-2 Flex flex-all m-h d22 REM and this will just give these cards a bit more size even though it looks silly right now it will look better very soon we can also give it a p- 2.4 remm for some padding that's much better already and we can say pointer-events dnone as these won't be clickable cards to this H5 we can give a class name equal to H5 and margin bottom of five okay and below the H5 we can also render a P tag that will render the item. text and we can style it a bit by giving it a class name equal to body -2 margin bottom of six and text- n-3 these end colors are just special colors we have defined in our Tailwind config you can call them anything you like if we go into our config you can see right here if we go to colors that we just call them different things of course we could have named them something else as well now let's go below this P tag and let's render a div and this div will have a class name equal to flex items Das Center and margin top of Auto within here we're going to render the icon for this card by giving this image a source of item. ion URL a width of about 48 a height of about 48 and an Al tag of item. tile if we now save it you can see that each card just got a special icon looking good let's also provide a P tag to say Explore More so simple P that says Explore More and Below we can also render an arrow which is a self-closing arrow component which we can import at the top by saying import Arrow from SL assets SL SVG slash Arrow now if we scroll down you can see Explore More and arrow but it's not really aligned so let's style this B tag by giving it a class name equal to margin left of Auto font Das code to change the font family text- XS font Das bold text- n-1 for the Coler uppercase and tracking Dash wider this will give it a bit of a bigger letter spacing finally it looks like I messed up the item center right here if we do that it's looking much much better now if we go a bit down to two divs down sometimes we might want to have a light item which will be a bit different from other items and in that case if item. light is true meaning end end then we can render the gradient light which is another SVG coming from the top so we can import gradient light like this coming fromd design slash benefits if we save it you can now see this gradient appear over the cards we choose and the way we chose it is we simply put it right here card light true and these ones don't have the light true this one does have it so you can just modify it and that's going to give this nice effect uh of a gradient light appearing behind some cards just for some visual interest finally we can go below this gradient light and create another div this div will be interesting if we go to the finished website you can really see a lot of stuff here but if we expand it you can see how if you hover over the cards you get this nice looking image to appear well this will be for that image URL but we have to be smart with how we're going to place this image onto the card so that once we hover over it it happens or rather it appears so let's give this div a class name equal to Absolute ins set of 0.5 which will apply a CSS inser property and a background of N8 we can also give it a style equal to clip path of URL benefits I don't specifically remember why I had to add this clip path but I think it helps showing those background images on Hover So within this div we can have another div which will render that actual image so if we properly close it and inside we check if the item has an image URL like this only then render a self-closing image property that has a source equal to item. image URL also a width of about 380 pixels a height of about 362 pixels an Al tag of item. tile and if we save it you can now see those images everywhere but we want to give it a class name of w-o for full width h- full for full height and object Das cover so it nicely fits right there now to hide it or to only show it on Hover we can style this div by giving it a class name of absolute inset -0 opacity -0 but then transition the opacity on Hover opacity will be 10 so now if we hover you can see how it nicely appears in a lower opacity so it doesn't take away from the card and right below these two divs we can also render a property called clip path which we can import at the top by saying import clip path from d/ assets slash SVG slash clip path this is just a simple SVG which ensures that we also see the ends of our cards oh yeah this will actually apply that clip path of benefits so now if we go a bit up and you see this clip path of URL it will actually allow us to see full rectangles for these cards and with that in mind we're done with the benefit section we reuse this amazing section that allowed us to quickly create it you'll see how it looks like on desktop devices soon we used a couple of svgs and we neatly mapped over our benefits which are simply a collection of different data pieces and we also created a heading which will make much more reusable later on and we helped ourselves with a couple of svgs so now now if we close this and the heading the benefit section is done so let's see how does it look like on the finished website on desktop there we go this is looking great if I compare it with the finished one you can see that we definitely have a bit of a large size for our card headings so if we go back here and if I check out our H5 oh it looks like I said H2 right here I should have said H5 so if I go go back this is now much more like it it looks amazing chat smarter not harder with brainwave and we have these nice looking cards of course you can Implement an onclick right here and then you'll be able to navigate somewhere for example to show more details about a specific benefit or a feature again fully responsive so if we go to a smaller view you can see we have six and if we go right here we'll have only one per row and it looks and feels incredible L natural for mobile devices as well so with that in mind our benefit section is now done and the next section will Implement will be this AI chat collaboration section which looks great on desktop you can see a big heading on the left side with some illustrations on the right side and if we go right here it looks great on mobile as well so let's get started with collaboration to get started with the collaboration set section we can first create a new component within the components folder called collaboration. jsx and we can run ource and immediately import it within our app by opening a new tag and saying collaboration coming from components then if we scroll down you can see collaboration right here we can command click into it and start implementing it by first wrapping everything into a section coming from do/ section which is going to just give it some space and we can give a special property of crosses to this section which will also on larger devices apply these crosses above the section this just applies some visual interest so that it's not boring when you scroll you sometimes have those crosses as well for different sections and if you remember it is so simple to do it now because right here within the section we have implemented a special crosses part which then adds this div with crosses which is basically just a collection of svgs with that in mind right within our section we can create a div that div will act as a container so it can have a class name equal to container and a large devices Flex so now if we scroll you cannot see anything within that div we can have another div and that div will have a class name of Max dw- 25 remm so this is for the max width and right within it we can render an H2 that can say AI chat app for seamless collaboration there we go and we can also style it a bit by giving it a class name equal Al to H2 margin bottom of four and medium devices margin bottom of eight there we go now if we go below that H2 we can render a UL or an unordered list and on a finish website that's going to look something like this where we need to map over a couple of different elements such as integration Automation and topnotch security so we can give this Ur a class name of Max dw-22 REM and margin bottom of 10 and a medium devices margin bottom of 14 right within it we can map over our collab content coming from do/ constants by saying call up content. map where we map over each individual item and for each one we return An Li now this collab content is is just a simple array with three objects that have different titles that's it and we can also pass special collab text such as this one right here which we will pass into the second property so let's give this Li a class name equal to margin bottom of three and padding y of three and a key equal to item. ID now if we save it and go back you cannot see anything and that's because we have to Prov provide some content within the LI in our case that's going to be a div and that div will have a class name equal to flex and items Das center right within that div we're going to render an image which will have a source equal to check this will be that check mark which is coming from do/ assets with a width of about 24 and a height of 24 as well now if we go down we can also render an H6 element and render the item. tile for each of these checkboxes that's going to look something like this so now we can also give this image an Al tag of check for accessibility purposes and this H6 can have a class name equal to body -2 and margin left of five to provide some space between the elements that's looking much better now if there is a text uh such as in a case of the first property we can then check if item. text exists then we can render a P tag that's going to have a class name equal to body -2 margin top of three and text- n-4 and it can render the item dot text so if we save it now we can see the text right here this text should go outside of this div not within this uh specific div that contains the checkbox and the text so let's put it just below and that's going to make it look much better now we also have to implement this button try it now so that button will come below the UL and that button will now be simple to implement as we have our own custom reusable button component which can say try it now see how simple that was we now have a reusable section and a reusable Button as you develop your apps and uis it's all about creating that custom UI that you can then use and leverage which is great and tailin config of course makes it easy uh not that long ago we had a custom class and this container here is a custom class that applies a width but also applies some media queries for different widths and and it's very useful to expand on the typical table in config with colors font families and so on so you can more easily create reusable classes great with that in mind we can start focusing on the second part of our collaboration component which is this illustration right here so to create it we can go below the button and below this div and start focusing on the right side of the screen at least on desktop devices on mobile everything is just below so let's create this div that will have a class name equal to on large devices margin left off auto on extra large devices w- 38 REM like this and we can now put something within it specifically I'm going to put a P tag that will render the collab text coming from constants this is a special text which is just basically a string but it's better to extract it into constants and then use it like this then to type it manually right here now let's also style it a bit by giving it a class name equal to body -2 margin bottom of four text- n-4 on medium devices margin bottom of 16 on large devices margin bottom of 32 and on large devices W of 22 Ram also on large devices margin X of Auto so we provide some margin or spacing between the elements great also to divide this text from this button we can also maybe add a margin top of something like two or maybe even more such as four now that we have that we can start Focus focusing on the right side of the screen or as I said on mobile that's below it's this illustration that you can see but the coolest thing is this is not just a single image if you try to drag and drop you can see that each one of these icons is a separate thing so this is not just an illustration that you just place on the screen rather we're going to develop this circle and the way that the elements go around this Brain Wave logo it won't be easy but we'll do it together right below this P tag we can create a div that will act as the wrapper for this illustration with a class name equal to relative left off 1/ two Flex w-22 REM aspect d square because it's a square illustration border border D n-6 rounded D full minus translate dx-1 /2 scale of 75 and on medium devices scale of 100 to make it a bit bigger so if we do this you can now see this Outer Circle appear right here we have just created a circle that's it basically a div acting as a border that then has the round full property which gives it a maximum border radius now I think you can see where we're going with this right within it we can create another div that will have a class name equal to flex w-6 aspect d square margin of Auto border border Das n-6 and rounded D full if you do that you can see the second Circle appear within that div we can create another div and that div will have just a different width so we can give it a class name equal to w-6 REM we can also give it an aspect of square margin Auto padding Dash something like 0.2 REM bg-- gradient and rounded Das full and then within this one we'll apply another div that will then render an image this image will be a source equal to brainwave symbol coming from assets with a width of about 48 height of about 48 and an Al tag of something like brainwave which is the name of our app now we can style this div to centrally position it by giving it a class name of flex items Das Center justify Das Center w-o h- full background of N8 and rounded Das full to make it a circle so now it is nicely positioned at the center but I think we're missing one Circle even though we said rounded full we don't yet see anything right here and that's because I think we misspelled this conic gradient it's BG conic if I spell it properly now this looks exactly like it should as you've seen it might have seemed simple but we're going to really build it not just slap an image and call it a day so now that we have all of this we have to go uh one two three diffs down and create a UL uh this UL will wrap over collab apps so collab apps is basically just an array of different icons so you can see the title of the icon as well as the icon itself and we can say collab apps. map where we get each individual app and its index and we can immediately return An Li a list item this list item will have a key equal to app. ID within this list item we're going to have a div and within this div we'll render an image that will actually render a source of the app. icon if we do that and scroll down you can see all of these icons appear now let's properly position them on the screen we can start doing that by styling our Li so let's give it a class name equal to let's make it a dynamic template string and we want to absolutely position it on the screen so position absolute we're going to give it a top Dash Z and now they're going to just fly away somewhere we won't be able to see them on the screen at all what we also want to do is give it a left- 1/2 and h-1 over2 as well minus ml margin left- 1.6 REM like this this is going to position it on a specific angle and we can also give it An Origin bottom which is going to do a transform origin bottom property and now we want to rotate it which is interesting so we want to say rotate Dash and now we want to make this dyamic we want to apply a rotation by using dollar and curly braces index times 45° so we're going to rotate it by 45° and we're going to get something that looks like this this is great now of course we have to play with the scale a bit right so we can Style this image within not the div just the image for now by giving it a class name of m- Auto as well as a width of app. width and a height of app. height okay this will change the width and the height and we can also change the alt what we're doing this by saying ab. tile this is more like it but they're still not touching this Outer Circle let's first Style div and then we can play with that further by giving it a class name equal to let's make it Dynamic and let's give it relative positioning let's also give it a minus stop Dash 1.6 REM there we go that's much better let's give it a flex property w-h so this is for the width of 3.2 Ram let's give it also a height of 3.2 RM that's much better let's give it a background like BG N7 let's also give it a border and a border n 1 over 15 so it's going to be barely noticeable but I think you can see it right around those elements like they're floating they're kind of like planets in a universe flying around the Sun so we can give it round the- excl to make it a circle and we can also apply minus so minus rotate Dash and now that's going to be index times 45 so now you can notice how they rotate right if I go back you can see how these are not properly positioned right now but if I rotate it back to where we had it it's looking good but now you you might think are we just not canceling out these two rotations well let me show you what happens if I remove this rotation as well as this minus rotation they're not properly positioned at all so we have to rotate them on the LI axis but then rotate them again for them to be properly positioned so you can see them all in a normal view from top to bottom great and with that in mind you can see how this looks like on mobile it's great but if we expand it you can also see it on desktop but are we missing something if we go to the finished website you can see it looks good what if I expand it even further you can see that here you have a tried now line that goes from this one to here kind of like you're going to trigger some effect and there's also a line going from here till the end showing that you can collaborate effectively it's these little details that matter so to implement this we can go below the UL and we can render the left curve like this as well as the right curve right here and these are two elements that we can import at the top by saying import left curve as well as right curve coming from sles slash collaboration and you can see that now if if we go back to the current website we cannot see them really on mobile and maybe we should also provide some margin top on this let's do that so if I go here to where we have our circles I can provide a margin top of something like two or we did four before so let's do four or maybe let's do a margin bottom of this piece of text right here oh we do have it margin bottom of four it's weird why is it overlapping let's try to increase it a bit to something like five or maybe even six or eight there we go that's a bit better so now if I expand it you should be able to see those lines appear on our current version as well although they're barely noticeable you can see them right here and how do those work you might ask well if we go into one of these you can see that it's basically a div with an image that renders the curve which I don't think we can see because it's an SVG but basically it's just a line the you position the screen and then we use absolute positioning to properly position it once again this project has a lot of absolute positioning but hey it works right and you need absolute positioning if you want to make something like this but you have to make sure that it works great on mobile devices as well great with that said we have completed the collaboration section which is yet another section in our design let's see what comes after that is it the pricing well well not yet we're going to do the pricing soon but now we have a very exciting section that looks like this generative AI made for creators we have this huge over the entire screen I'm not even sure how I would call it but we are reusing this AI generating which is pretty cool uh we have some more additional checkboxes I would call it some features right these are different features that our app has oh and I got excited this is exciting we are not just seeing double this huge over the entire screen image we have a big one and then we have smaller one this is I believe called a bento box design if I'm not mistaken yep Bento Box it looks something like this Apple has done it not that long ago where we have more rectangles some bigger and some smaller you can see it here on the Apple website and you can see just how similar it is to what we have on the screen right now A big one and some small ones so without any further Ado let's dive into creating our next section of the day which is Services what are we offering to get started with the services section we can create a new component called services. jsx run rafc and then simply use it right here beneath our collaboration Services there here we go and we can just self close it and import it from components Services then we can go right here and we can start implementing them this is maybe one of the most exciting sections of the application maybe besides the hero section I mean you cannot really beat this and also the mobile menu is pretty cool so now in the services we can of course wrap everything in a reusable section component which we need to import oh the import doesn't want to do it for now for some reason so we can manually import it by saying import section from SL section there we go and scroll down now the ID of this one will be how to use or meaning which Services we provide and right within it we can have a div that will have a class name equal to container great now within the that container we want to render a heading component so heading like this and we also need to looks like self imported at the top by importing heading from heading and to that heading we can pass a title of something like generative AI made for creators that's kind of our title there we go and we can also give it a text equal to brain wave unlocks the potential of AI powered applications now this text won't do anything on its own but what will is once we go into this heading and make it more reusable allowing it to accept text as another property and then to do something with that text such as going in here and saying text and and we can then render a paragraph that will render that text with the appropriate class name of body -2 margin top of four and text- n-4 so now you can see the heading and you can also see the subtext great going back to Services beneath our header we want to create another div that will have a class name equal to to relative this div will contain another div that will have a class name equal to once again relative Z of one to appear a bit on top a flex so it can Flex some items within it items Das Center height of 39 REM like this margin bottom of five padding of eight border border of n 1/ 10 rounded -3 XL overflow Das hidden on large devices padding of 20 on extra large devices h-46 REM now this didn't do a lot on its own it just created space for something to show here and that something will look a bit like this this is what we're creating space for pretty exciting right so what do we do within that div well we can create another div and within that div we can render a self-closing image that has a source equal to service one and looks like Auto Imports are really not doing me service today maybe if I close the file and then reopen it maybe now no still doesn't like me never mind so let's Auto Import it from the top saying import service one we can also get the service 2 service 3 as well as check mark or check from d/ assets great so now if we save this you should be able to see this great looking image right here but it doesn't really look that good on its own so let's kind of style it to be a part of that div specifically we can give it a class name equal to w- full h- full object-- cover on medium devices object dasr we can also give it a width of about 800 pixels and a height of about 730 pixels and we can give it an Al tag of smartest AI great now this is still just an image so let's style this div containing it by giving it a class name equal to Absolute top- Z left- Z w- full h- full there we go that's more like it pointer-events dnone to indicate it's not clickable on medium devices w-3 over5 and on extra large devices W off auto there we go that's much better this looks more closer to what we have on the finished version and now below this div containing the service we can render another div that will have a class name equal to relative Z of One Max DW of 17 REM and margin left of Auto within there we can render an H4 that can say smartest Ai and we can also render a P tag that will say let's copy it from the finished website brainwave unlocks the potential of AI powered applications there we go that's good and we can also render a UL that will have a class name equal to body -2 and within here we can map over brainwave Services of course if we spell it properly and if we get outo Imports but looks like we don't have any luck today so I'll go right here to the top and manually import it gez I just remember the times when I had to manually import everything uh brainwave services and then brainwave Services icons coming from SL constants that's going to look something like this it's basically just photog generating photo enhance and seamless integration and services icons I is capitalized there we go so now you can see the three of them photo generating photo enhance seamless integration but let's put them within different Li items by saying brainwave Services map where we get each item and the index and we can automatically return An Li that will have a key equal to index and within that Li we can render an image that will have a source equal to check and beneath the image we can render a P tag that will say item this will look like this now of course we have to style the H4 the P tag the Li and the image so let's start from top to bottom with the H4 by giving it a class name of H4 and then margin bottom of four as as well we're creating some text hierarchy right here then we can create another class name that will have a body of two margin bottom of let's do three REM and then text- n-3 so we're making it a bit smaller and we're also muting the color a bit then we can style our Li by giving it a class name equal to flex items Das start padding y of four to create Some Space Border DT for top and Border d n-6 as you can see this provided this very light color border on top and we can also style the image by giving it the width of 24 and height of 24 as well and finally we can style the P tag by giving it a class name of margin left off four and we have just converted what was previously just an image into something that looks more like this great now we want to do a couple more of these right it's not just one if we now expand it this is looking so wonderful on desktop devices but now we want to have two more of these um and as you can notice they're all similar they have a title subheading and then some text in this case or no these are just titles and subheadings without text this right here is just the image but once again this is not the entire image right here you will create this popup manually as well as the image and even this icon and this track right here that you can see all of that will be created manually we're not just sticking a sticker on it same thing for this too why is this useful well if you have a landing page where you know for a fact that this will not change then you could have just used that as the entire image same thing for this here everything right here could have been just a single image although if it's image it's larger in size but if you have it like this this is not taking too much computational power or internet right um and text loads much faster than an image which allows you to use smaller images and Achieve better performance so with that in mind I can now collapse this you can still see see how it looks on mobile devices and we can start creating those two different cards oh but let's not forget on the original card if you expand we have this AI is generating right here at the bottom and on our current version we don't have it so let's go right here below the UL and below the div create a new generating like this self closing component which we canut Port generating from SL generating we have created this component before but we have to provide it some class names to position it exactly where we want it to be right now it's here we don't want that it's there so we're going to make it absolute so it doesn't just jump into the view this gives us power to position it where we want such as left four right four bottom four if you do that you can see now it's here we can also give it a border n of 1 over 10 as well as a border in General on large devices now you want to play with the positioning a bit on large devices left of one over two and this is just a trial and error so you can just figure out how to position it properly LG right Auto LG bottom 8 and also LG minus translate X1 over2 so now it looks great on medium it looks great on larger tablet even here and it's even here on mobile wonderful now let's go a div below and let's start creating our second service what we can even do is we can just collapse this entire div for the first service I think it's this one there we go so now this makes sense we're going to have three divs within this relative service one service 2 and service 3 and the bottom two are going to be within a grid so we're going to play Not only with flex but also with grids we can give it a class name equal to relative Z of1 grid gap between of elements of five and enlarge devices grid calls 2 and now we can start creating our first one by wrapping it in a div that will have a class name equal to relative m-h Das something like 39 REM I found works the best border border-- n-1 over10 rounded D3 xcl and overflow of hidden and now you can see that we have created the second card within this div we can create another div that will have a class name equal to absolute and inset zero and within it we can render the image for this second image or for the second service that will have a source equal to service 2 that looks like this with a class name h-o w-o and object D cover now that makes it bigger let's also give it a width of 630 a height of 750 like this and let's give it the alt of something like robot that should be good there we go now let's go below it and let's also add this text on top of it now this text will be similar to the text we used for the first one so we can copy it this one just below the service one it's going to be this one right here a div that contains the H4 for and the P tag so let's copy it collapse it one more time and use it right here below this div containing the image and paste it and don't forget to close this div that we copied as well if we save it you can see it doesn't look as good so we have to still play with it a bit let's modify the styles of that div let's make it absolute so we get more uh kind of power of where we want to position it let's do ins set of zero let's add a flex Flex Dash call justify Dash end so it appears at the end padding of eight BG gradient to B like this this is a linear gradient from n 8 over Z to n 8 over 90 with a large devices padding of 15 this applies this gradient so it looks very nice but this is still not similar to how it looks on the finished website right on the finished one it appears at the bottom not at the top and I think that's because I messed up the justify end so if I fix it now it's at the bottom and here we're going to say something like photo editing and we can say whatever this text says right here by copying it and pasting it right here there we go now we have to do this photo chat icon I think I have quoted this one before it's just a photo chat so if we go to the top and if we import photo or I think I misspelled it as fod F chat message coming fromd design SLS Services you can see how this photo chat let's let's fix it it's Photo Chat Photo Chat right here um and you can see what this is it's basically a div but I provided it to you because it's just a div where we have to do some absolute positioning nothing more than that and then it uses this double bubble double bubble Wing which is an SVG nothing more than that um this is great and we'll also get some more more things from this design uh folder uh called gradient we have used it before video bar this will be that bar at the bottom and also video chat message these are all mostly just components that are absolutely positioned to be somewhere in the screen and they use some kind of svgs or pngs to show some content with that in mind we can now scroll down we can also use the dollar sign or rather the N sign sorry appos and then semicolon to do the aposto this is the way you properly do it because like this you get a warning saying that you need to escape it and then right here below this p and below the div we can render the photo chat message as a self-closing one and it will appear on top so with that in mind we're done with the second of these services so I believe I can properly collapse it so this is the first one this is the second one and now we can create the third one but I don't think I have collapsed it properly um remember that I said that these two services will be within this outer div that has a display of grid so I have to collapse this inner one not the outer one and then go right here below it now I can create a new div that will have a class name of padding of four BG of N7 rounded -3 XL overflow Das hidden on large devices m-h d46 Ram this will create some space right here at the bottom for the new card let's also create another div within it for the layout with a class name of padding y of 12 and padding X of four and an extra- large devices padding X off eight as well within that div we can create an H4 this H4 will say video generation and below that H4 we can create a P tag that can say something like this thing right here this will be the world's most powerful AI video generation art engine what will you create okay that's a good one of course let's style it a bit by giving this H4 a class name equal to H4 and margin bottom off four let's also style this P tag by giving it a class name off body das2 margin bottom of two REM and text- n-3 for the Coler there we go that's great and now here we'll have to map over all of these Services they're not just an image we actually map over them and for example this one can be selected so to implement that right below the speed tag we can create a UL element and this UL will have a class name equal to flex items Das Center and justify Dash between then within it we can render the brain wave Services icons do map where where we get each individual item and its index and we can automatically return An Li for each one of these that Li will keep track of a div and within that div we can render an image that renders that item which is just an icon so should I say source is item and we save it and this gives you five of these icons now of course we can further style this by making this one selected and by giving them some kind of a background behind I'm not sure if you can see it but there's a circle happening behind each icon so let's style it by giving this Li a class name it can be a dynamic One Flex items D Center justify Dash Center and now we want to keep track of the index and if if the index is triple equal to 2 meaning the third element then we're going to give it a w of three REM and h-3 remm as well and a padding of 0. let's do three a BG Das conic Das gradient rounded Das 2XL on medium devices width of 4.5 RAM and on medium devices height of 4.5 Ram as well else if it's not the currently selected one then we want to give it a flex W of 10 h of 10 BG of n6 rounded Dash to Excel or now that I see it this rounded could have gone outside of this so we could have put rounded at the start rounded -2 Excel that way we don't have to repeat our ourselves two times then let's continue we also want to give it a medium device width of 15 and on medium devices height of 15 as well now if we save it the reason why we're getting an error is because we didn't provide a key is equal to Index this looks very colorful but on the final one it's not the actual full circle that's colorful rather it's just the border so what we can do do is we can also Coler this inner div by giving it a class name where we can check if index is two then we give it Flex items Das Center justify Das Center w-f h- full BG D n-7 and rounded Dash let's do one REM and save it of course we have to do the other part of the turnery and say nothing but now as you can see it seems that we have completely hidden that color that appeared before and that could be because we provided too much padding here this padding controls how much of this circle we're going to see around it so if we do something like padding of 0 point let's do 25 instead of three you can see that now we have just enough of this background uh conic gradient to show which is exactly what we wanted also for this image we can give it a width of about 24 height of 24 and an Al tag of item so it knows what it is and with that we have our icons the only thing we're missing is well the only this is a cool thing we're missing is another Chad bubble with an icon as well as this photo and then we have this track bar so to implement it we can go go below this ul and Below one more div and we can create a final div right here this div will contain an image this image will have a source equal to service 3 and we can see this image right here it can also have a class name equal to w-o h-o and object Das cover also we can give it a width of about 52 20 and a height of about 400 and we can give it an outof scary robot I guess um and below this image we can render the video chat message as well as the video bar which are very simple components that we just absolutely position on the screen we can style this Diva bit by giving it a class name equal to relative this will make all of the absolutely position elements within it properly positioned themselves so now we can see this chat box we can also give it an h- 20 REM for the height we can give it a background of N8 a rounded of excel an overflow of hidden on medium devices h of 25 RM great and if we go one two three devs down we can also render a gradient component which you cannot see on mobile really but now if you're ready for it we can expand and this is how it looks like I think you can see the gradient right here if we go back you can also see it on the deployed website yeah that's great and on the test website we have this wonderful looking full image we have these two smaller ones that we play a lot with absolute positioning and it's crazy how well everything works and looks like across different screen sizes so now if I start kind of slowly putting it like this you can see how it collapses even more and then finally we have everything on one screen and it still looks very very nice this bento box design has been something that I really liked recently a lot of Dev tool companies and even Tech compan comp like apple have started using this bento box design more and more one that I specifically remembered that has a new website design is Clerk and if you expand it and if you check this out you can see right here how they have this same design right it's a bit different it's not exactly the same but it's a box in a way where you have different sizes of rectangles so here you have two and there here you have one and once you hover you have some nice animations happening on the screen you could also play with our design and animated so that once you hover on some you make some animations happen very modern and very visually stunning and interesting design with that in mind we can collapse our browser and go back to our app.jsx to start working on the next section the next section is Maybe not as interesting but definitely maybe one of the most important ones which is the pricing section here you have to be really careful of how you position it what shows on mobile what shows on desktop in which way it shows and how does it look like so here you can see how the premium and the middle part is kind of a bit exposed to the outside it shows kind of like on top of the basic in Enterprise you have to be careful and you also modify the color of the buttons depending on which one you want them to use so this section is maybe not as interesting but it's definitely important so let's collapse it and let's get started I think you already know the drill right we'll go to our components create a new component called pricing. jsx run rafc and then simply import and use it right here by saying pricing s closing and there we go it's at the bottom now let's navigate into the pricing and let's start developing it first we'll wrap everything in a section coming from do/ section and we'll give it a class name equal to overflow Das hidden then we can also give it an ID equal to pricing so that we can nicely scroll from the Navar to our pricing section we can create a div with a class name equal to container relative and Z index of two within it we can create another div and this one will have a class name usually it will be hidden relative justify Das Center margin bottom of about 6.5 Ram to divide it from the bottom and on large devices Flex meaning it will be visible and what we're developing right now is something that you cannot see here but if we expand it you'll be able to see it it's this sphere right here that we're creating it's a very cool visual element so we'll have to keep our browser about this size right here so we can also see it within our development environment so moving down into this div we can render an image that will have a source equal to small sphere coming from acids with a class name equal to relative and a z of one there we go we can also give it a width of about 255 and a height of about 255 as well with an Al tag of sphere there we go that's more like it now we also want to add some Stars around it so below this image we can create a div and that div will contain an image that will have a source equal to stars coming from assets you can see how those stars look like right now they push the sphere to the left but we can first modify the class name so that it takes the full width by saying w- full a width of about 950 and a height of about 400 and then I'll tag of stars more so Circle than stars but it will do and now we have to style this div so that it actually appears absolutely positioned so that the sphere doesn't mind the Stars around it by saying absolute you can see how now immediately the sphere is not concerned with the Stars around it it gets taken away from the general layout then we can play a bit with the positioning by saying top-1 over2 left- 1 over2 W Das 60 REM minus translate dx-1 over2 and minus translate dy-1 over2 as well and pointer-events - none there we go that's more like it now if we go two divs down we want to create our heading and that will be quite convenient right now because we already have our heading component so let's pass two things into it a tag equal to get started with brainwave and a title of pay once use forever sounds a bit sketchy but who knows maybe it's good now you can only see the pay once used forever but you cannot see the tag so let's go into the heading and make it a bit more reusable so that it actually accepts a tag at the top and now has to do something with that tag within this div we can recognize if a tag exists and if it does we can render a tagline component like this this tagline of course doesn't yet exist so what do you say that we go ahead and create it we can do that by moving into our components and creating a new component called tagline do jsx we can run rafc and we can quickly use it or import it from the tagline so we no longer have the error for some reason the Auto Import isn't working so I can do it manually right here at the top by saying import tagline from SL tagline and it should be a lowercase L there we go now at the bottom we can see tagline which means that we can jump into the tagline and start developing it this component to make reusable will also accept class name as well as children let's properly spell the class name and let's start creating the layout of this tagline just to remind you it should look something like this it should have brackets on the left in the right side and some text in the middle so to achieve this look we can first render the children in between of a div so we can have a div with a class name that's going to be Dam iic that will have the tagline class Flex items Das Center and it will render the dynamic class name if it exists or it will be an empty string like this now here we'll use a special component called brackets which we have to import from assets this is basically an SVG so we can say import brackets from SL assets slsv G SL brackets and then we can call it as a function and pass it aside such as the left side and after that we can also pass the right side if we do that you can see that we have here left and right and the way it works it's basically a react component that returns two different svgs depending on the prop that we send over and in the middle we want to run render a div and that div will have a class name equal to margin X of three to divide it a bit from the sides and text dn-3 inside of which we can render the children now if we go back we can now pass some children into this tagline and we can pass something like just a tag right what we're passing from the pricing section and that's already looking better now let's position it to the center by giving it a class name equal to let's give it a margin bottom of four on medium devices justify Dash Center and if we save it that's already better great now let's go back the pricing section and below this heading we want to render another div and this div will have a class name equal to relative within here we want to show our pricing ing list and that pricing list will be yet another component so let's create a new component called pricing list. jsx and some of you might wonder how often do we have to create components well it's more an art than a specific answer but when a specific component starts getting too big you can split it into multiple or if you want to reuse it across multiple places now we can import this pricing list right here by saying pricing list and we can import it at the top by saying import pricing list coming from SL pricing list we'll also import two additional elements called Left line and right line coming from do/ design slash pricing and we can use those those right below the pricing list left line and right line there we go if I save it you can see that it's complaining that it cannot get it from that that/ design let's see why is that we're in the pricing and we want to go to the components oh yeah it it is just slash design pricing there we go so if we go here this is basically this line that you can see here and the line on the right it's barely visible but later on it's going to act as a connector from the left side to the right side just a small visual detail now we can finally dive into the pricing list and start implementing our pricing section A pricing list will essentially be just one card which will be repeated three times with some small changes so right here we can create a div that will wrap all three of them with a class name equal to flex gap-1 REM like this and on Max LG devices flex-wrap so they nicely wrap within it we want to map over the pricing coming from constants by saying pricing. map where we get each individual item and for each one we want to return a div within that div we can return an H4 and that H4 will say item. tile if we save it you can see basic premium and Enterprise and this reminds us of this these are the three pricing cards so if you look into the pricing you'll see that I created three different objects that contain different things such as title description price and features we can map over so let's use all of that data to make it happen first we can give this give an ID equal to item. ID and we can also give it a class name equal to and while we're developing this we can also collapse our browser because the pricing section is also visible on smaller devices we can give it a w of 19 RAM on Max LG devices w- full h- full for full height padding X of six and you can start seeing how they're forming then we're going to have have a background of N8 for the color border border D n-6 rounded -2 REM like this you can slowly start seeing how it's forming on large devices W Auto which we cannot see right now on even elements we can do a padding y of 14 so this will only be on the middle one which is the premium on odd elements padding y off8 this will give it different sizes just to create a visual hierarchy where the premium one will seem the most important and if you want to you can also change the colors of these three cards for now I will simply leave it white as it is next let's create a class name for this H4 something like H4 and margin bottom of four will do that's much better let's see why this div is complaining oh it's missing a key prop it should have been a key instead of ID and below this H4 we can do a P tag that will render the item. description there we go and as a matter of fact let's create the full structure first and then we can focus on The Styling below the P tag we can create a div and this div if the price exists so if the item. price is there it will render a div which we close and that div will say dollar sign and then in a div below we can render the item. price of course you know the drill whenever you have two adjacent elements they have to be wrapped in a react fragment or another div so we can put them here and properly close them there we go now we have the price 09 and this one doesn't have the price because it's on demand below this div let's also render a button this will be a button component that we have created before coming from SL button and it will simply say if there is a price so if item. price then it will say get started else it will say something like contact us there we go already a nice looking button also some of these buttons can have different styling so what we can do is give this button a class name and give it a w- fo as well as margin bottom of six we can also give it an HRA property where if it has a price then it will lead to the pricing section else it's going to say mail to info add and then here we can do something else like JSM dopro or let's do a real one that's going to be contact at Js mastery. Pro there we go now if we save this buttons will do different things but we also want to change how they look like so we can say not not item. price this double exclamation mark basically turns whatever value into a Boolean value so if it's Trudy it's going to turn it into true if it's falsey it's going to turn it into false and since those two have a price it will turn them into white and this one will remain colored finally below the button we want to render a ul and that UL will map over the item. features. map where we get each individual feature and an index of that feature and for each one we return An Li that has a key of index and it also renders an image which is our check image so source is check coming from do/ assets with a width of 24 height 24 and then I'll tag off check there we go let's also add a P tag that will simply render the existing feature there we go so this is our card but now is the time that we style it so let's scroll all the way to the top to our description and let's style the description first by giving it a class name equal to body -2 m-h D4 REM to give it a bit of height margin bottom of three text- n-1 over 50 there we go then we want to style this div containing the price by giving it a class name equal to flex items Das Center h- 5.5 REM and margin bottom of six then the div with the dollar sign will have a class name of H3 and the div with the price will have a class name equal to text- 5.5 remm and leading Das none as well as font Das Boldt that's a big price 0 and 9.99 then we want to scroll down to the UL specifically to the Li and give it a class name equal to flex items Das Center or rather I think we're going to do start here makes more sense padding y of five border DT for top and Border - n-6 there we go that's more like it and finally let's style the PED tag by giving it a class name of body -2 and margin left off four there we go this is our pricing card of course it doesn't look that interesting on mobile but if we now go back and zoom it out you can see we have a nice looking card but this definitely isn't centered like it is on the finished website so we have to center it but our cards are looking good another thing we can do is push this Center card a bit up so that it appears on top of the other two by scrolling up and saying odd margin y off four as you can see now it seems like it's a bit bigger then we can also play with the colors a bit you can see how much better it looks like here and we can do that by using some special properties specifically square brackets and then n sign greater than H4 so we're targeting the H4 and we're saying first text- color-2 this will now give the first one a color of two then we can tar get a second one by copying this and saying second text- Coler 2 which won't work so the second doesn't exist only the first one but what we can do is we can say even right so we can say even which is the middle one right and we're going to give it a Coler of one and then I think maybe you can guess it if we repeat it one more time we can say odd text color of three three or rather there's a special property of last and this is going to give the last one a special color great now let's Center this pay once used Forever by going back to the pricing and I believe that's within heading here we can also add a property on medium devices to do a text Dash Center and that will properly Center it now we're almost done with the pricing section besides one small detail at the bottom which is see the full details in case you want to explore what else are you getting with each one of these pricing options so if we go back to pricing and go below this div containing the right line we can render another div with a class name equal to flex justify Dash Center and margin top of 10 and within here we can render an anchor tag that says see the full details and there we go we can also apply a couple of class names to this anchor tag such as text- XS fond Das code font Das bold and we can also collapse our browser to see it like this there we go see the full details let's also give it a tracking Dash wider which will make it span a bit more and give it uppercase border dasb and we can give it an hre pointing to pricing great with that in mind we are done with the pricing section which looks and feels great on all different screen sizes after the pricing let's see what other section do we have this time we have what we're working on section and this is an interesting one as you can see once again a lot of stuff is moving here we're going to reuse our tagline component I think you can see the similarity right so if you're wondering why this was a custom component this is why we are reusing it here then we have these different boxes saying what the app can do and once again all of these are custom Elements which we will develop and then we have the road map so you can see that we'll essentially develop one of these cards and then create the layout and then just call it four different times which is quite exciting so let's go back to our app let's collapse it and let's start developing our next section called road map so we can create a new component called road map do jsx run ource and then simply import it right here by saying road map import it from components and just use it and there we have it so to get started with it you know the drill we're going to definitely reuse our section component which we can import from that/ section now that we have it we can also give it a class name equal to overflow Das hidden and an ID equal to road map then we can have a div within it that will act as a container by giving it a class name of container on medium devices and larger will also give it a padding bottom of 10 and we can immediately display a heading property this heading of course we can import from heading that's slhe heading of course and we can give it a tag equal to ready to get started and a title of what we are working on and immediately looks so great we just wrote one single line right below it we can create a a div and that div will act as the container for all four of the road map cards by giving it a class name equal to relative grid a gap of six on medium devices grid Das calls D2 on medium devices gap of four between those grid items and on medium devices a padding bottom of seven REM and now we're going to map over our road map of course first we have to import it by saying import road map coming from do do SL constants and this road map looks something like this once again it is an array of four different cards that have a title text date status image URL and a colorful true or false property so we can say do map where we get each individual item and for each one we can not instantly return rather open up a function block to First figure out the status of the road map and Status can say equal to if item. status is triple equal to done then we can set it to done with an uppercase D else it will be in progress we will use this right here you can see how this one says done this one says done this is in progress and so on so now we can say return and then we can return a div what do you say that we first create the structure for it just like we did before and then later we can apply The Styling let me know down in the comments what you prefer and also let me know how it is following these videos where I type all of this code do you type in real time do I speak too fast or too slow just let me know and I will try to make it better but with that in mind within this div we first give it a key because we're mapping over it of item. ID within that div we'll create a second div for layout and within that second div we'll create a third div for the layout as well within that div we can then display an image that image will have a source equal to grid which we have to import from data/ assets and if we save it looks like we didn't close something properly maybe we had too many divs oh yeah I'm missing the ending sign right here that's good and now we should be able to see the image but yeah you can see the Grid in the background it's barely noticeable but it's there we can also give it a class name equal to w Dash full a width of about 550 and a height of about 550 and an Al tag of grid below that image and the div it's contained within we can create another div this one will of course close and we'll give it a class name equal to relative and give it a zindex of one just to know where we are within that div we'll create another div that will have a class name equal to flex items Das Center and justify Das between and within it we'll render the tag line coming from tagline which will render the item. DAT there we go now we can see four different dates appear right here below the tagline we can render another div and within that div we can render an image this image will have a different Source depending on its state so if source is equal to if item. status is triple equal to done then we can render a check two else we will render a loading one and make sure to import them from the assets we can also give it a class name equal to Mr of 2.5 like this we can give it a width of about 16 and a height of about 16 and the AL tag can be status now we cannot see it on mobile but if I expand a bit we should be able to see that icon no not yet later on it should look like this we're rendering the check mark oh that's because we are on the dark background so we cannot yet see it even though it's there later on we'll add some color to it and below that image we can render a div that will have a class name equal to tagline and it will render the status so now you can see in progress and right next to it is the icon that we cannot see right now finally if we go one and two divs down we can render another div this div will have a class name equal to margin bottom of 10 and within it we'll render another image this is the most important one that will have a source equal to item. image URL it's also going to have a class name equal to w-o a width of about 630 and a height of about 420 and an Al tag of item. tile that's going to look something like this we have four of these different images now in not so good of a layout so let's go here collapse it and yeah this is definitely not that close but we're getting there below this div containing the image we can render an H4 that will render the item. tile there we go chatbot customization and below the H4 we can also render a P tag which will render the item. text there we go that's looking good immediately we can give this H4 a class name on of H4 and margin bottom four and we can give this P tag a class name equal to body -2 and text- n-4 there we go so I think you can see what's happening here this all of this is a flex layout each card but right now it's a flex row whereas it should have been a flex column so let's scroll all the way to the top and let's start implementing our class names by adding some additional styles to our divs we can start from top to bottom with this div that has the key of item id we can give it a class name equal to it's going to be a dynamic one on medium devices it will be Flex on even elements and medium elements we can run a translate of Y 7 Ram to kind of move it a bit this will allow us to have that layout where not all are just appearing in a single line whereas on desktop devices one is up one is down and they seem kind of dynamically flowing on the screen let's also give it a padding of about let's do 0.25 and rounded -2.5 REM next we want to figure out if it's a colorful item or just a regular item so we can open up a dynamic code block and say if item do colorful question mark and then we can say BG Das conic D gradient or else we can say BG D n-6 and save it and of course let's remove this last Dash and there we go now you can see it so if I expand it you can see that all four of these or all three of these look a bit pale whereas this one really stands out as that's the last thing we have done within a road map so going a bit back we can continue styling it by styling this inner card by giving it a class name equal to relative p-8 for padding BG D n-8 rounded das2 REM orlow Das hidden and on extra large devices we want to bump up the padding to 15 the div within it will have a class name equal to Absolute top- z left- z and a Max DW Off full this is the background grid so we wanting to absolutely position it so it doesn't take away from the display of the other elements then we can scroll down to this div with relative or rather to this div with flex finally we can give it a Max - w-27 RM for the max width margin bottom of eight and on medium devices margin bottom of 20 then we want to go below the tagline and give it a class name equal to flex items Das Center padding X of four padding y of one BG of N1 rounded and text- n-8 we can scroll down specifically to this div wrapping this image we can position it a bit better by giving it a minus margin y of 10 and minus margin X of 15 and even after applying those Styles it looks like the layout is still not there I've had some issues with my divs not closing automatically as you can see I had to close them manually which I haven't done in a long time so it messed up my UI and this was a long component so in case something is messed up with your component as well no worries you can go to the description down below go to the read me and then copy and then paste it right here the only thing we have to change is this tagline to lowercase L if we save that you can see that all of the changes we've done have been successfully implemented so if we scroll a bit up we have this grade section that has this item colorful which applies a BG con gradient and then we have three additional ones which have no gradient but all of this looks amazing and we haven't checked it out on desktop so if I expand it you can see how great this looks like it's similar to a Bento Box that we have seen before but this time it goes one two and then again moving 3 4 right here it's a very Dynamic and interesting layout great and also at the bottom we have our road map finally the last thing we have to do is the footer we can see how that footer looks like it's a very simple and minimalistic one and once again we utilize those crosses which we have implemented before so let's collapse our browser go back to our app.jsx and implement the footer of course we have to first create it within the components footer . jsx run RFC and then simply import it right here like it was always there now you can see the footer which you can navigate into and we can start implementing it it will be as easy as turning it into a section coming from that/ section that will have crosses turned on with a class name off exclamation mark PX of0 so we're just resetting the styles to zero right here and using exclamation mark for important and same thing we're padding y of 10 because this section is a bit different from our typical sections as it's a footer within it we can have a div that will have a class name equal to container Flex on small devices justify Dash between justify Dash Center usually items Das Center gap of 10 on Max SM devices which is minwidth of 640 we want to apply a flex column because this is on very small devices and if we save it you cannot see anything yet but now we can add a P tag that can say something like we can get a new date like this by using a dynamic block and saying new date and then do get full year this way you don't have go back and manually update and we can say all rights reserved there we go if we save it there there it is we can also add a copyright sign which you can just Google and then paste over here that's just the C and we can add a DOT after the year there we go we can also style this B tag by giving it a class name equal to caption text- n-4 and enlarge devices block okay it's very muted not in your face but it's there and then we want to go below the P tag and form the UL give it a class name of flex gap of five and flex-wrap and there we're want to map over our social icons by saying socials imported from constants map where we map over each item and each item is an anchor tag containing an image with a source equal to item. ion URL with a width of about 16 a height of 16 so it's very small and then I'll tag of item. tile now you can see all of these social icons and we of course have to give this anchor tag a key equal to item. ID an href equal to item. URL so we can navigate to it and a Target uncore blank so this will open it in a new tab and not override the current URL finally let's style this anchor tag a bit by giving it a class name of flex items - Center justify Das Center w-10 h-10 BG of N7 rounded Das fold to make it into a circle transition Dash colors and then hover BGN off 6 so now if you hover over them you'll have this nice looking transition this is great and with that believe it or not our footer has been implemented which means that we are ready to expand our browser and check this out the crosses are here the road map is here the footer is here the Navar is here and you can click click on different parts of the website to scroll through them you can also click on brainwave to check out our amazing homepage congratulations you came to the end of this video and you have developed the entire brainwave application now comes the exciting part we are ready to share our project with the world which means we need to deploy it to the Internet so to do that open up your hostinger dashboard and navigate over to your hosting and the main name for this project once you're there go to file manager this will open up an H panel where you'll be able to drag and drop the files of your application there we go you can head over to public HTML delete the default PHP and we are ready to upload but the question is upload what well in this case we have to run mpm run build and you can see this within your package at Json if you go to scripts there is a build script so go to a terminal stop it from running and then run mpm run build this will create an optimized production build of our application in just under a second it will create it under a new folder called this which you can see here right click it and click revealing finder or opening file explorer and the only thing you have to do is expanded and then copy and paste everything from here to our H panel this process should take just under a minute or under a second and you can go back to our dashboard finally click your domain name just like that in a second we have deployed and hosted our application and all of the amazing things we have implemented this is looking great as you scroll down you can notice that everything is here and everything works wonderful we have our pricing we have our road map section which we have implemented not that long ago and our footer and if I click you can see how fast it loads and also we must not forget that it is https secured what you can see by going to security SSL and you can see that the SSL certificate has been applied and with that done phenomenal job on coming to the end of this video I'm very proud of you since you came to the end you might be interested in our ultimate nextjs course hosted on JS mastery. proo the link will be in the description now you have built a vit application but you're definitely ready to dive into everything that NEX gs14 has to offer and this is not just react some people think it is but it's more many companies use it but you can end up using it just like good old react which is not going to work because your performance won't be good so in this case I want to teach you how to have your performance be at the top levels and through a specially crafted process where we go through a series of Deep dive lectures with a lot of illustrations explaining the ins and outs of nextjs where you build and deploy a very complex app and with active lessons where you not only watch the tutorial but also participate in building it by by being given a task examples resources and even hints to develop it finally you'll build the complete stack orlow clone but an even better version of it a modern Dev overflow application which look which looks and feels amazing so with that in mind if you want to dive in and the text stack of 2024 and Beyond just go to J mastery. proo and join over 3,000 developers that have already enrolled with that said thank you so much for watching this video and I'll see you in the next one have a wonderful day

Channel: JavaScript Mastery

Views: 83,934

Keywords: javascript, javascript mastery, js mastery, master javascript, react js, tailwind css, tailwind css tutorial, modern ui ux, react js responsive website, react tailwind, react tailwind css, landing page react, web development, tailwind css tutorial react, next 13 tutorial, react js project, tailwindcss tutorial, tailwind css project

Id: B91wc5dCEBA

Length: 193min 56sec (11636 seconds)

Published: Fri Mar 01 2024