Build and Deploy a Premium Next JS React Website | Landing Page, Business Website, Portfolio

hello everyone and welcome to another javascript mastery video today you're going to build and deploy a professional nexjs landing page i'm talking full-fledged beautifully designed extremely fast website that you'll be able to show to your friends potential employers and share it in your portfolio let's see what this is about we have a nice header by the way this is a startup landing template you can see their log on the top they offer amazing neck.js templates then we have some svg's action below you can see this blue and yellow lines we also have the features section with some nice icons as well as the services section with a clickable video iframe below that we have some more features svgs and icons finally we have this cool step-by-step explanation of the product segment and below that a really important part of the website and that is a beautifully designed pricing section where users can choose between monthly and annual plans every website also has to have a simplistic team section with social media links and just before the end we have this extremely clean testimonial section that you can slide around and finally to finish it off we have a simple footer of course all the links the top are scrollable so you can click there and immediately get to a specific part of the website as you can see this is a complete product a fully functional beautiful single page website ready to be deployed we're using a placeholder product as the topic for this website but of course you can change all the content to accommodate your needs you can use it as a development portfolio maybe as a business website or you can think of absolutely anything that makes sense to you and that makes you happy at the end of this video to do this website justice we're going to deploy it using extremely fast hosting provider called hostinger but more on that later before we begin let's discuss the benefits of nexjs nexgs is an extremely popular framework so called the react framework for production nextgs has the best in-class developer experience and many built-in features for example it has an intuitive page-based routing system it has pre-rendering static generation and server-side rendering it also supports automatic code splitting for faster page loads and finally it has built-in css and sas support and support for any css in js library don't take my word for it let's take a look at next.js showcase as you can see nexgs is used by some of the biggest names in the industry netflix tick tock twitch hulu and even nike before getting into nexjs you should be familiar with javascript and react therefore making those a prerequisite for this video there are so many benefits of using nextgs opposed to just using plain react for this specific website first of all seo search engine optimization is going to be so much better using nexjs secondly nexgs is going to make this website extremely fast and when i say extremely fast well take a look i'm gonna click refresh and if you blinked you might have missed it that's it it loaded of course hostingers hosting is going to play a major role in making it even faster now without any further ado let's get started with building this amazing software to support this video leave a like comment and subscribe it really helps with the youtube [Music] algorithm since this is a big production ready website it has a lot of code for that reason i created a starter folder that you can download and then we can start from the same page but don't worry i didn't code out the entire thing we're going to do that together so to download the folder go to the description of this video click the link and then here on the top right you can click download once you download it you can find your zipped folder and then we're simply going to extract it the second thing you can do is open a code editor of choice in this case i'll be using visual studio code i have an empty visual studio code window and i'm simply going to drag and drop this folder right in here if we expand it you'll see that this is the starter code for our next.js application but don't worry we're gonna go over all of these files let's first install all the necessary dependencies instead of installing them manually in this case they're already included in our package.json and as you can see there are quite a few so to install those dependencies let's run mpm install or you can install them using yarn as well once the projects are installed we can run mpm run dev this is going to start the next js development server it's not npm start as it is in react it's just a bit different npm run dev as soon as you do that you'll see that the server has started on localhost 3000 so let's go ahead and open it in the browser you can see that we have simple headings for all the sections that we're going to have so it's a clean slate nothing is in here we're going to code it out before we go ahead and completely build this website out let's first get the hosting that we're gonna use later on in the video hostinger is my personal recommendation it has great price to quality ratio extremely fast servers and most importantly 24 7 chat support many times i was stuck and i couldn't deploy a website but thankfully they have chat support so you can just contact them and they're gonna solve your issue for you let's see what is being offered here with some of the hosting plans hostingers plans are extremely competitive i mean one dollar a month for hosting for one website and you get free ssl certificate that means that you're going to have https security if you think you're gonna have a bit more visitors like 25 000 then i would definitely go with premium hosting and in this case that's what i'm gonna use with this website but that's not all since i've partnered with hostinggear they decided to give all of you guys a special discount code all that you have to do to get that discount is go in the description and click the link there you'll also be able to find the discount code so now let's go ahead and select our single shared hosting for example just so i can show you where you can enter the discount code while we're in here let's scroll down and right in here you can enter the javascript mastery discount code that's going to up your discount even more so you'll have a better deal once you're done with these steps and you have your hosting you can then sign in into your account and then at the end of this video we're going to use that hosting to deploy our extremely fast website now let's go back to the code as you can see the starter code looks quite familiar we have a readme with just some basic information about our project we have a package.json with a package.log.json we have a next.config.js this is one special file in here we can install all the necessary plugins that we need for our next.js application in this case we're using optimized images then we have a jsconfig.json in here we're simply setting source src as our base directory that way we won't have to do dot slash dot slash src something this file allows us to simply do something like forward slash something that's it and then we have all the usual stuff like public where we have favicon and sitemap node modules that handles all of our dependencies and the dot next folder which next.js automatically generates the magic happens in the source folder if i make this a bit bigger so that you can see we have quite a few folders here we have assets and these assets are going to hold all of our images svgs and everything that's visual that we can put onto our website then we have our components in the components the only thing i've prepared for you are blank components for each special component like for example image i prepared for you only the actual function component nothing else we just have the return and in some components we're also going to have the styles so if we go to for example feature card you can see we have our component there and then below we have all the styles for our specific component they're going to be quite a lot of styles in this application and we're not going to write them by hand because we have to be really precise with this website after all it is a production level website so we have to have a lot of precise paddings margins widths and so on because of that all the styles will be generated for you just below each of these components that way we can focus on things that matter writing out the logic and creating the structure of the website you might notice that some styles look a bit weird like mr which is margin right and margin left that is because we'll be using the theme ui theme ui is a great design framework that's going to make it simpler for us to create that nice looking website you saw at the start of this video but again for this video you don't have to know it since i'll provide the styles for you besides the components we also have the pages folder in here we have our index.js this is the main file where we import all of our sections and then we're going to display them right in here as you can see we're going to have a banner key feature service section feature core feature workflow we're gonna code this all together once we come to the sections folder the underscore document is a special next.js file where you can simply override some of the html or body tags so in here we can provide a language for our website we can also get some initial props change the body import some scripts and so on finally our underscore app is also a special nexjs file where you can simply import everything that you're gonna have access to globally so in here we're importing some css for our carousel for our model and so on with that said we can jump to sections part and in here we have components for all of our sections again it's going to be similar to our components all the imports are prepared for you we're going to code it out and then we're going to use the styles which are written down below finally below our sections we have a theme folder with just one file which is our theme in here we have the colors for body color primary color secondary color we have all of our colors modes breakpoints fonts and so on listed in this file but again since styles are written for us we don't have to worry about that in this video we're going to focus on logic the thought process and creating the layout of that great website you saw the start i know i know you don't want me to continue explaining things let's close this and let's start creating our first section it's going to be easier for us to work on this website if we open our visual studio code next to our browser that way we'll be able to see the changes we make live to do that i simply put our localhost 3000 on the right side of the screen now let's start we can go from top to bottom starting with the header to create the header we're going to go inside of components and then the header folder inside of here we have the header.js file now as you can see we have our component right there with some imports and we also have some stylings with positions so let's focus on creating the header to create the header we're going to use some of the components from themeui in this case that's going to be a container flex and a button so let's start with that we're going to remove this h1 from here and immediately inside of there we're going to create an html5 semantic tag that's going to be our header in theme ui we can provide special styles by saying sx and then provide the specific styles so we can say styles dot header and just in this case since we also want to provide some class names that we are passing as props to our header we can say class name is going to be equal to class name let me show you where these class names are coming from for that we have to see where we're calling our header component so i'm going to search for our header if we search for a header component we should see it right there inside of our layout as you can see we have the header here and we're passing a different prop depending on if it is sticky or not so sometimes we want to have a sticky header that sticks to the top and sometimes we don't want that so in this case we're just providing this simple class name right there so we can focus on that one last thing for a header is going to be the id and the id is simply going to be header now let's continue with creating the header inside of there we're going to have a container tag that container is going to have the sx equal to styles dot container so if you can see this is going to be a standard practice that we're gonna do we're gonna say sx is equal to and then we can mention the styles that we have just below styles.header styles of container and so on below that we're going to have a logo so logo is going to be a special component that we're going to create but for now let's just leave it here as a self-closing tag that logo just has to have the source of the image and we are already importing it from here we're going to use the logo dark below our logo we're going to have a flex container in theme ui that is just flex and we can provide the as parameter and that is going to be our nav so it's going to serve the purpose of a nav which has to be a string in that flex we can also provide the styles so we can say sx is equal to styles.nav finally inside of our flex we're gonna have all of our menu items of course we could write them right here like menu item one and then menu item two and so on but we can already have them in a specific array and in our case as you can see we have menu items which is in the header.data so if i open this and go to header.data.js you can see that we have an array which simply has some objects with paths and labels for some specific navigation bar sections in this case we have home features pricing and testimonial if you want to you can add new navigation items just by following the structure and adding a new object with a path and a label but now that we know how our menu items look like we can go back in our header and we can map over them so we're going to open a dynamic block of code and we can say menu items again menu items is that same array you just saw we're simply importing it in here and we can say dot map we're gonna map over each menu item and we're also going to get the index of a specific menu item once we do that don't put the curly braces put simply parentheses because we want to instantly return something and what are we going to return for each menu item it is going to be a link it's not a self-closing tag we're going to have something in there but it is a link and as you might notice this link is coming from a library called react scroll so if we find react scroll on npm you'll see that it's a package with 360 000 weekly downloads and basically all that it does let's open a code sandbox all that it does is it gives you different links that you can click so let's expand this just a bit and if you click it you can see it scrolls to a specific part of the website there we go as you click it it scrolls so that's the only thing we want to do you'll often notice that in the production level websites you don't have to code everything by hand you just have to know that there is a package that does that for you don't reinvent the wheel in this case that's exactly what we are doing now we're using that link that's going to scroll to a specific part of the website for us so let's add all the necessary properties that it needs and again if you need to know which properties does it need definitely read the documentation that's something that i want to teach you we're going to use a lot of different dependencies and we need to learn how to read the documentation in that same npm page you'll see props options part i can make this even a bit bigger for you and as you can see we have all the things that you need to pass to it we have to have the active class which is a class applied when element is reached so let's add that active class active class is going to be equal to just active that's one of the styles we'll be using then we have to have the two property where we're going to go and that is going to be the path then we have to have the spy which is the make link selected when scrolling it at its target position so it has to be selected that's the spy and that's going to be equal to true we can also make it smooth to animate while scrolling so we can say smooth is equal to true and let's also make an offset offset is going to be something like minus 70 pixels just to bring it a bit up of the div we want to scroll to duration can be something like 500 milliseconds and the key because we need to have a specific key is going to be equal to i a specific index finally what is this link going to say well remember we have that label so in this case this path and this label are coming from our menu item so we can do menu item dot path and menu item dot if we save that and go back we should already see something on our nextjs website we don't see anything yet because right now our website is small so it's displaying a mobile navbar but if we make it just a bit bigger we should be able to see the navigation bar we just created there we go you can see home features pricing testimonial looks really clean right out of the box below our flex we're gonna have a button that button is going to have a class name and that's going to be something like donate underscore underscore btn it's also going to have a variant which is going to be equal to secondary and it's also going to have the area label which is going to be equal to get started now let's save it and see how does it look like as you can see our button is right there but of course let's put something in it get started nice this is our call to action and as you can see we have a nice navigation bar with this get started button right in here also remember that we just imported this logo in here but we haven't yet created the component to display the logo so now would be a good time to do just that we're going to go to our components and then in here we're going to find our logo as you can see right now it is just a simple h1 tag but we want to add something to it so what are we going to add we're going to make our logo a link but this is going to be a special link component we are yet to create as you can see we are importing it from our own components our link is going to have a path which is going to be just slash because it's the main home page then we are going to provide some styles sx is equal to and then let's do them inline because we don't have a lot of cells to write we can say variant is going to be equal to links dot logo then we're going to set a display to be equal to flex then we can specify a cursor to be equal to pointer and finally we can say margin right mr is equal to 15. great finally our link needs all the other properties as well so we're going to open a pair of curly braces and we're going to say dot dot rest in this case we're simply spreading all the properties that we are receiving in our logo great finally what is our button gonna say well it's gonna display an image so inside of here we can specify that image tag from the theme ui it is going to be a self-closing tag this time and in there we need to provide the source of our image so we can say src is equal to src because remember we're already passing that source as a prop to our logo so if you take a look we're passing a prop of logo dark and then in our logo we're simply using that source finally let's provide an alt tag for people with screen readers and let's say something like nexjs landing page logo if we save that you'll see that we still don't see the image and that is because we have to create this link component so that's going to be our next step we're going to go inside of our link right in here and as you can see from here we're exporting two different things a nav link and a link so let's go ahead and create the code for them the process is going to be straightforward for the link we're going to use the same link from themeui as you can see right there and i know that this window is a bit too small but as soon as we're done with creating the desktop header i'm going to expand our code window a lot more so you'll be able to see what's happening but from now we're simply importing the same old link we used and we're just renaming it as a anchor tag because our component is already named link so inside of here we're going to use that link from themeui and in our link we're going to spread all the other properties we're passing from our component so that's going to be dot rest as you can see we have them right in here finally we're going to leave an href and that ahref is simply going to be the path which we are also passing in each specific link finally this component is going to display a dynamic block of code we can say if there is children so if there is children then we want to show that children else we want to display the label we're passing into that anchor tag so basically we're saying if there is a logo display the logo but if we pass anything different into this like a text then display that text and as you can see our logo appeared and if you expand it we basically have our entire header with a logo a few links and a button the second thing we have to do is we have to create a mobile logo as you can see this one is going to disappear and now we have to create something on mobile devices so that's going to be our next step just below our button we're going to create a new component called mobile drawer that mobile drawer is a self-closing component that we are going to create as you can see we're importing it from that slash mobile drawer so if we go to our code in here you'll see that we have mobile drawer right in here so in here you'll see some imports we'll see all the social media icons and if we scroll just a bit down you'll see that in here we have our component the logic for creating a mobile drawer is usually in most apps a bit more complicated because you have to account for a lot of things when is the mobile drawer gonna open from which side how is it gonna look like on which viewports and so on but let's code it together inside of here we're gonna wrap everything with a drawer component and that drawer component is a component that we have to create if i scroll up you can see that drawer is coming from components drawer so maybe it would make most sense to code out that drawer first so we're going to go here not in header but this time in drawer and we have to code it out we have a lot of props coming into it but nothing that we're displaying yet so let's code out that drawer let's remove the h1 and let's wrap everything with a react fragment so this is a normal fragment that we are importing from react as you can see on the top inside of our fragment we'll be using another dependency this one is called rc drawer basically react drawer so if you open the npm page for that you'll also see that it has 500 000 weekly downloads and that it's quite straightforward to use you just have to import it and then specify all the menu children inside of the drawer that's going to render a nice looking drawer and in here you can see all the props that you need to pass to it but in this case i'll be leading you and we're going to do it together so let's start with creating our drawer that's going to be rc drawer and in there we have to pass quite a lot of props those props are going to be as follows is the drawer currently open so we can say open is equal to open and you might be wondering where is this open coming from well you can see we're passing it as props into our drawer so if we go to our mobile drawer scroll down a bit we're gonna pass it right in here into this drawer but more on that later i know this can be a bit confusing but i'll try to repeat everything as many times as possible and i'll try to do it as slowly as possible so that everything sticks we also have to have the on close when are we going to close that specific drawer and that is going to be equal to toggle handler which again we're going to pass from our mobile drawer and you might also be wondering why are we passing everything and then coding everything here then in here we'll also have to pass everything what is the point of that why not just call it once well the thing is once you have a drawer in your application most likely you're gonna use it multiple times across the application but you're going to have to pass different parameters and this is the exact reason why we're doing this with that said we also have to provide a class name our class name is going to be dynamic we're going to open a pair of curly braces and then in here we're going to specify a class name of drawer so this is going to be the class name that we're always going to have in there but we can also have one additional one that we passed through props so we can say if there is class name if there is that additional class name then show that class name else if there is no class name then show an empty string just like this and finally we also have to call the dot trim on the string because usually there can be some issues if you don't trim it if there is a class name great okay moving forward we're going to have our width which is going to be equal to the width property we're also going to have a placement property to know where to place that drawer we're also going to have a handler which is going to be set to false in our case then we're going to have the level which is going to be equal to null and finally we're going to have the duration that's going to be the animation duration that's going to be equal to 0.5 seconds and this needs to be in a string finally we're going to spread all the other properties that we pass by doing data dot props and these are all the props that we have to pass in our rc drawer now inside of it we can have another dynamic block code in there we want to say if there is a close button then we want to display the following block of code and that is going to be a box which is a simple div box is going to have a property as div so it's going to appear as a div and it's going to have an on click property which is going to be equal to toggle handler it's also going to have the sx styles which are going to be equal to close btn style and inside of there we're simply going to say close button but it has to be a dynamic block of code okay great finally below that close button block we're gonna have another box that box is gonna have the sx equal to drawer style and it's also going to have children in there that means that whatever you pass into this drawer component we're going to display or render it as children now finally below our actual rc drawer we're gonna have one more box and this box is going to have a class name that's going to be equal to drawer and then underscore underscore handler it's also going to have a style property and style is going to be equal to a display of inline block and also it's going to have an on click property which is going to be equal to toggle handler great now inside of there inside of that box we can simply say drawer handler that's going to be a variable that we pass through our props now let's save that and we are finally ready to go back to our mobile drawer because there now we have a working drawer and we just need to pass all the props to it and make it mobile to do that we're going to expand this and now we're going to pass all of these props if you hover over it you can even see what does it accept because we just defined that so we're going to have a width of 320 pixels then we're going to define that drawer handler and that drawer handler is going to be equal to a box so let's define a box that's going to have the sx styles dot handler and in that box we're going to have the i o md menu which is simply an icon that is a self-closing tag that's going to have the property of size equal to 26 pixels now if we save that we're still not seeing anything besides this small icon a hamburger menu that looks really good right there but now let's make it open and show us everything that we have to do that we're going to continue passing some props one of them is going to be the open property which is going to be equal to is drawer open so open is drawer open we're also going to have the toggle handler and that toggle handler is simply going to set the state is our drawer currently opened so we can make it a callback function and there we're going to say set is drawer open and then to use the previous state we cannot simply say no is your open what we should do is create a callback function or get access to the previous state and then how can we toggle it well you say no previous state or not previous state and that's going to toggle it we got an error right now and that is because we have no state variable called is drawer open or set is your open so just at the top of our return we're going to create a new use state field that is going to be const is drawer open and set its drawer open which is going to be equal to use state at the start we're going to set it to false because initially we don't want our drawer to be opened now if we save that everything is back in action and take a look if we actually click this we can see our drawer you can see how it nicely animates and moves our entire website to the right side but right now we don't have anything in there so let's continue creating the layout of our drawer we also need to have a close button so inside of there i'll say close button is going to be equal to and then in there we can simply pass the i o md close which is a self-closing icon basically we can set the size to be equal to 24 pixels and we can also set the color to be equal to and that's going to be hash 0 0 000 which is pure black color so if we now test it again you can see we have this nice x button at the top finally let's add some more styles to our navigation bar so that's going to be drawer style is equal to styles dot drawer and let's add our close btn styles so that's going to be close btn style is going to be equal to styles dot close if we save this these are going to be all the props that we have to pass into our drawer now if we open it up you can see it slides nicely it's a bit faster now and we have this nice button on the right side but now is the main part let's show our content inside of this drawer inside of our drawer we're gonna have a new package that we're gonna use and the name of the package is scroll bars more specifically if you scroll to the top you'll see that it is scroll bars from react custom scroll bars so let's see what that is about i'm gonna find it on mpm and as you can see again it has more than 150 000 downloads they say that they provide frictionless native browser scrolling native scroll bars for mobile devices fully customizable and so on we're going to use this package to provide a native like experience for our mobile drawer with that said let's continue with our code let's expand this a bit more and right inside of that scroll bar we're going to give a special property called auto hide to that specific scroll bar and below we have to have boxes to loop over all of our menu items so let's do just that inside of the scroll bars we're going to have boxes that are going to display our actual content so we can create a box this first box is going to have a sx styles dot content so inside of there we'll be displaying content and we're going to have one more box inside of this one this box is going to have the sx equal to styles dot menu and finally we can loop through our menu in there if you remember correctly we already had our menu inside of here so we can basically copy and paste this entire part and then modify it just a bit let's go back to our mobile drawer and paste that code right into here let's see if we have to change something active class active path is going to be the same spy correct smooth offset duration key and label all of this is going to stay the same and finally below this box we're going to have one more box so this is inside of the content box but below the menu box this box is going to have the sx equal to styles dot menu footer so let's go ahead and do that this box is going to have one more box inside of it and again these boxes are just divs that we use to create a layout for our content in here we're gonna have the sx of styles dot social we're going to have some social media icons in there let's create a dynamic block of code and say social dot map inside of there we're going to have a social item and we're gonna also grab the index and again let's use simply a pair of parentheses to instantly return something so what is this social well let's scroll to the top and you'll see that we have the array called social and it's similar to our data for the mobile links you can see that we have objects and each object has a path where you can modify your link and the icon for that specific social media platform each social media link is going to be a box that box is going to have the property as span and then in there we're going to have the key of i and also sx of styles dot social dot icon inside of that box we're gonna have our link and our link is going to point to and then we're gonna provide a specific path also inside of that link we're gonna show our icon but where are we getting the path and the icon from well we're gonna be getting them from the social item so just before the path and the icon we can say social item that path and that icon let's see where this link is coming from so if we scroll to the top you can see link is coming from the old react scroll that we already used now let's save that and that should be it for our entire mobile drawer i know that this was a lot of work to just create a header but but headers especially well made ones and mobile friendly ones are definitely not easy so if you take a look at this we now have a great looking mobile header this is one of the best that i've ever seen if we expand the website you'll see that we have a nice desktop looking header and no hamburger icon there but if we collapse it to a mobile size as you saw right there and click it it pushes all of our content to the right side we have this close button with all of the links and also social media icons on the bottom as well so far so good again heather is one of the tougher things so we had to spend a lot of time on it but as we move forwards things are going to go a lot quicker because all the other sections are actually like it or not easier than the header so with that said let's start creating our banner we can find our banner if we go under sections and then banner as you can see in here we have a heading but we have to transform it add the code to make it into a real banner doing so is not going to be that hard first we're going to remove this h1 and then we're going to convert it into an html semantic tag called a section that section is going to have sx which we set our styles of styles dot banner and it's also going to have the id of home inside of that section we're gonna have a container tag coming from themeui that container is going to have sx equal to styles.banner.container inside of that container we're going to have a box and that box is gonna have these styles equal to styles dot banner dot content box so content box inside of that box we're gonna have a heading like this also coming from themeui and that heading is going to have the ask property so it's going to be as h1 and it's also going to have a variant of hero primary so it's going to be our primary header inside of there you can have your headline but in our case let's do something like top quality digital products to explore that sounds like a nice heading so if we do that as you can see we immediately get this nice svgs because we have them under styles for this banner container and we have our top quality digital products to explore below that we're going to have a text property so we can have text text is going to be as p tag so that's going to be as a paragraph and it's going to have a variant that's going to be equal to hero secondary inside of the text we can say something like check out our website to find grade software products and deals something like that just a placeholder text and there we go it appears right there seems to me that we need to add just one more sentence so let's say if you need a website or a web application this is the place to go great that seems like a nice heading or a nice call to action and finally below our text we're going to have one more button and that button is going to have a variant of primary so you can say variant is equal to primary and we can say explore or you can use a call to action called buy explore anything you want as you can see if we keep expanding it it's going to look great for all the screen sizes it looks even better on desktop the text gets bigger the secondary text also gets bigger and our explore button is right there i'm going to pull this to the side now so we can continue and just below this box we also want to add one more box this box is going to have the sx of styles dot banner dot image box and inside of that box we're gonna have an image which is again coming from um theme ui as the styles say this box is going to have an image which is again coming from themeui inside of there we can provide a source for our image and that is going to be equal to banner img with a capital b it's going to be a self-closing tag and we're also going to have the alt tag which is going to say banner if we save it you'll see that these svgs with colors drop down nicely below all of our content and go behind our image this image is basically displaying our software product this could be anything this could be your landing page or some of the websites you're building in this case it's a random product we're trying to market but if you take a look this looks so much better now if i keep expanding it you'll see that it looks great on all the screen sizes looks like a real commercial website already you can see that we have this nice heading at the top with the get started button and the logo and if we make it smaller it also is fully mobile responsive great i think that you can trust me now when i said that we spent most of the time working on the header as we keep creating sections it's going to get easier and easier so let's keep doing it let's go to the next section which is going to be the key feature let's open up our file explorer and then under sections you'll see key feature inside of here if you scroll down we first have the data for all of our features that's just plain text which you can change you can change the image for each thing and you can also change the title as well as the text but for now we're going to use that demo data and let's scroll down and then in here we're going to code out the key feature component the key feature component is going to be yet another section all of these sections are actually just that sections that have a specific id this section is going to have the id of a feature and then based on these ids we'll be able to scroll to a specific part of the website you're already starting to get the hang of it so my question for you is what are the components for why do we have so many components if we already have the sections well some sections are going to be more complicated and then we can separate them into multiple components which we're then gonna use but for now let's continue creating our key feature our section is going to have the sx equal to and then double pair of curly braces variant is going to be equal to section dot key feature but this section.key feature has to be a string this looks a bit weird but that's how we're going to do it in this case with themeui below that we're gonna have a container and inside of that container we're gonna have a section header so if you take a look at the top where is that section header coming from and this is the example of a component so section header is a component that we have to create so let's see what are we going to do with our section header well it is going to be a self-closing tag just like this and we're going to pass it two different props first one is going to be our slogan and then there let's say what's the function and then the second thing that we're going to pass into it is going to be the title in the title we're gonna say meet the feature of our product something like that just some basic text so now we know that we are importing a section header that accepts two different parameters a slogan and a title now let's open up our components and then inside of there let's find our section header there it is our section header is going to simply be a box and that box is going to have the sx equal to variant again in a string section header like so inside of there we're going to have a text element again coming from themeui as you can see at the top we're going to say as p so it's going to be a paragraph and then inside of this text we're also going to have some styles so i'm going to put this into multiple lines and then we can say sx is equal to and now we're going to have an object and let's specify a few properties first of all a variant is going to be equal to a string of section header dot sub title then below that we're going to have a caller which is going to be equal to and we're going to have a ternary if we have is white property that is equal to true then our color is going to be equal to white else it's going to be equal to primary so we have this one property called is white and as you can see we'll be getting that through parameters so through props to this function and as you can see we'll be getting this is white through props of this function and this is also one of the best ways to explain why does this part this box with a text need to be a separate component because we need it to be dynamic modular it has to change depending on specific parameters we don't want to copy this every time like here and here and then simply change this from white and in this case let's have something like black as you can see this is a lot of duplicate code we don't want that we always want to call one same component which is going to be something like section header and then simply pass different props to it like color is equal to white and color is equal to black and so on that's what makes react and therefore next js so popular they're reactive finally we can change the opacity the opacity is going to be if it is white then we can say 0.7 else let's do one and inside of that text we're simply going to show our slogan which remember we're passing through props below that text still inside of the box we're going to have a heading element and that heading is going to be really similar to our text we can even copy what we have above our heading is going to be as h2 it's not going to be a p variant is going to be section header dot title and color is going to be if it is white it's going to be white else it's going to be heading and then the opacity we don't need here inside of there we can use another prop that we passed in and that prop is a title so let's save that and let's scroll down and take a look this is what we built small text on the top that displays our slogan right there and then we have a larger title that can be of different colors this is what we just created this is the section header that we are calling inside of our key feature but the point is this component is not only going to be called inside of this specific section it's going to be called inside of multiple different sections so we want to be able to reuse that thing so that we don't have a lot of duplicate code i hope that makes sense with that said let's continue with creating our key features section still inside of our container but below our section header we can create a grid component from themeui that grid is going to have the sx equal to styles dot grid and then inside of there we're going to use that data that we mentioned we have an array with four different objects and each object is one specific feature again feel free to change all the text that you want here you're free to change anything in our case we're simply going to map over the data to do that we're going to open a dynamic block of code and then we can say data dot map we have each data item and then we're going to have an instant return for each one of these data items what do we want to render for each one of these items well it's going to be one more component our component is going to be called feature card column and it's going to be a self-closing tag so if we save that as you can see we have four different feature cards but they have to be different they have to have some icons images and also titles and texts so we have to pass the data from our item into each one of these feature cards so let's do that first and then we're going to create the structure of our feature card our feature card since we're mapping over it we have to have the key which is equal to item dot id then we can also have the source which is going to be equal to item dot image src and then we can also have the alt tag which is going to be equal to item dot alt text i have a typo here let's fix that then we're also going to have a title which is equal to item dot title and finally we're going to have a text which is going to be equal to item dot text and i'm not imagining these things i'm not just putting them here we actually have access to all of this data right inside of here you can see each one of these data properties has the id image source alt text title and the text we are passing all of that data into our feature card i just noticed it's not going to be feature card it's going to be feature card column these are different components as you can see it changed to feature card column and let's find that specific component there we go inside of the components folder right here we have feature card column and we're expecting all the properties that we've already sent so let's create the jsx layout for the feature card column first we're going to wrap everything with a box and that box is going to have the sx equal to styles dot card inside of the box we're going to have an image and that image is going to be a self-closing tag and it's going to have a source it's also going to have the alt text and finally it's going to have the sx equal to styles.img if we save that you should already see that we get four different icons and again this is all modular if we go to our key features section you can see that we are mapping over to data and that we are passing a different image source each time depending on which item we're currently first one is performance partnership subscription and so on okay below the image we're gonna have a box and that box is going to have sx equal to styles dot wrapper inside of that box we're going to have a heading and a text so let's start with a heading our heading is going to have the sx of styles.wrapper.title and we're going to display the title that we've passed through props as you can see we're expecting it right here finally below our heading we're gonna have our text and that text is going to have the sx of styles.wrapper.subtitle and inside of that text we can simply pass our prop dynamically as text if we save that we get all the data and the content visible right in here let's try it for mobile as you can see it scales amazingly for mobile devices looks really good with our heading and with our banner section and if we try to expand it to desktop size you can see this looks even better we have our banner our heading and then we have our key features to be honest i'm really blown away with how good this looks this is also the point where we can already test our scrolling of our heading so if you click features it scrolls to features but if you click home it smoothly scrolls to home features home and once we do the pricing and testimonial you'll be able to scroll across all of our single page application great one more section done service section is going to be the next one let's find our service section under our sections so let's scroll a bit down and let's find it there we go service section we are again gonna have some dummy data with our services and our features but below that we're gonna have our component which we're going to code together right now our service section is going to be yet another section so let's create it it's also going to have some styles that are equal to variant and then a string of section dot services inside of the section we're gonna have a container that container is going to have the styles equal to styles dot container box and whenever i say styles make sure to write sx that's just how we do styles and class names in theme ui with that said inside of our container we're going to have a box and that box is going to have these styles equal to styles dot thumbnail okay our thumbnail is going to have the image and a button so let's first start with the image which is again a theme ui component this image is a self-closing tag and in there it's going to have the source src equal to service thump as a thumbnail and then the alt is going to be equal to thumbnail let's save it so that we can see how it looks like okay there is our thumbnail image and then below that image still inside of the box we're going to have a button okay that button is going to have a few properties so let's expand it and the first prop is going to be sx is equal to styles dot video btn below that we're going to have the on click which is going to be equal to handle click and finally we're going to have the area label and that area label is going to be equal to play button inside of that button we're going to have a span element and inside of that span element we're going to have an icon of io ios play okay this is an icon so now if we save that we're gonna get an error because we don't have this handle click function so just at the top let's create const handle click is going to be equal to a callback function so let's just create that arrow function and it's going to accept the click event as a parameter and then in there we can say e dot prevent default because we don't want to reload the page and we're simply going to say set video open equal to true okay now if we save it the error should go away and if we scroll down you can see we have this nice pulsating button that we can click right now this button is not going to do anything but let's add a bit more code and we're going to make it open up a video player so just below this button we're gonna have one more box but make sure that you're still in the first box we created that box is going to have the sx equal to styles dot shape box it's shape box and inside of there we're gonna have an image an image is a self closing tag which is going to have the src equal to shape pattern and it's going to have the alt which is going to be equal to shape if we save that let's try to expand it a bit and you should see this nice pattern appear right there but still our right side is a bit empty so let's add another box to cover for our right side i'm going to collapse this a bit and find the last closing tag of the first box just after that box we're going to create one more box which is going to have these styles equal to styles dot content box so this is going to be the box for our content inside of there we're going to have our own component called text feature our text feature is going to be a self-closing component which is going to have a subtitle in this case we can make it equal to data dot subtitle remember the data is that static data that we have at the top of this component and then we're also going to have the title which is equal to data dot title okay so now let's check out what this text feature is it's definitely a component that we need to create as you can see right at the top so let's open up our file explorer go to components and let's find the text feature component it's the last component in the list and if we click it you can see that it's accepting a few parameters or props i should say and we have the jsx of our component right in there so how is it going to look like well we're going to have a box our first box is going to have the sx equal to styles.card inside of the card we're going to have yet another box and this box is going to have the sx equal to styles dot wrapper that wrapper is going to have a text element as well as a heading element so let's first create a text element this text element is going to have the property as which is going to be equal to b as paragraph and it's going to have the sx equal to styles dot wrapper dot sub title and in there we can render simply a sub title but it has to be in a dynamic block of code because remember we're passing that through props below the text still inside of the box we're going to have a heading this heading is going to be of a h2 type so we can say as h2 and it's going to have the sx equal to styles.wrapper.title our heading is simply going to display our title which we're again passing through props if we now save that you can see we're passing our services and business goal achieved with design to this component which is then rendering them nicely below our first wrapper box we're going to have a dynamic block of code and then in there we're going to check do we have a description if we have a description then render the following block of code so when you see this notion description and and something that means if this is trudy if there is a description then render whatever is in here so what are we going to render if there is a description well we're going to render a block of text that text is going to appear as a paragraph and it's going to have a class name of description as well as the sx equal to styles dot description okay just like this and then in there we can render that specific description as a dynamic element if we save that you're gonna notice that absolutely nothing changed and why is that well that's because we're expecting a description parameter or a prop but if we go into our service section and scroll down you'll see that inside of our text feature we're passing in only the subtitle and the title we aren't passing the description and that's fully okay our components need to be modular they can do something if you pass some props and they can do something else if you don't pass them so we're handling that right here if we commented out our check and simply had our text we would always have this empty block of code and then even though if you cannot see it it's definitely there if i uncomment it you can see it just goes away finally we're gonna do one more check with our btn name we can also have a button in this component and if we have a button in that case we're going to render a link that link is going to have the href of btn url and a variant of default inside of the link we're going to have a button that button is going to have a variant of primary and it's also going to have the area label equal to btn name and finally what is the button going to say well it's going to say whatever is in that btn name again sits in this case in our specific service section we're not passing a btn name nothing is going to appear right away but the second time we're going to use this component we are going to pass all of these props so these are going to render okay let's continue with our service section we are gonna have a grid so we are still inside of that second box but below our text feature we can create a grid component and that grid is going to have sx is equal to styles dot grid inside of there we want to map over all of our services so if we scroll to the top you can see we have data and then we have i should have said features not services but here they are we want to loop over all of our features and then display them nicely so if we go inside of there we can say data dot features dot map and then inside of here we're going to get each specific feature and what do we want to render for each specific feature well we're going to render a box that box is going to have the sx equal to styles dot card and since we're looping over something we also have to have the key which is going to be equal to feature dot id inside of that box we're going to have an image and that image is going to have the src equal to item dot img src as image source it's also going to have the alt tag which is going to be equal to feature dot alt text and it's also going to have the sx equal to styles dot icon that image is actually going to be our icon and i've noticed that i've typed item in here but that item is actually the feature so in here i'm going to say feature dot image source now let's save that and if we scroll down or right in there we should automatically see two of these features but these features don't just need to have an image they also need to have some content so right below the image we're gonna create one more box and that box is going to have the sx equal to styles dot wrapper inside of that wrapper as usual we're going to have a heading and we're also going to have a text but let's first create the heading our heading is going to have the styles equal to styles dot wrapper dot title and in there we can say feature dot title so inside of here we're simply rendering our feature dot title below our heading we're going to render our text and our text is going to have the sx equal to styles dot wrapper dot sub title like this and finally it's going to say feature dot text if we save that now we have the text and we also have the title let's expand that a bit and see how it looks like on desktop devices looks really good we have four of these features that we had at the top and then in here we have this nice thumbnail with a button and we have our services on the right side the last thing that we have to do with this specific section is make a model once we click this button because the video needs to appear so how can we do that well to do that just below this container the end of the container but above the section we're going to create our modal video our modal video is going to be a self-closing component and let's see where is it coming from so let's scroll to the top and as you can see our modal video is yet another dependency or a special package that we are using so i just googled for react model video let's open it up a bit and as you can see this one has not a lot of weekly downloads only 17 000 but it's still a good package the reason why this has only 17 000 is that we probably could have done this using normal html iframe really easily but in this case we decided to use react modal video just to make it even simpler if i collapse this you can see down below the only thing we have to do is say modal video provide some of the parameters and it's immediately going to look good and best of all it's going to work so let's try to implement it if we go down there are only a few props we have to pass the first one is channel so we're going to pass the channel equal to youtube and then secondly we can say is open is going to be equal to video open this is going to be a state field that we have to code out then you can provide your video id this is one of the things that makes this modal video even simpler to use is that you simply provide the video id of a specific youtube video and it's going to automatically play it so video id is going to be equal to and then we can enter any specific video id to find a video id just go to any youtube video and then in there click share once you do that you'll get a link and then copy everything after the last forward slash this here is going to be your id so we don't need the entire link just take the id after the last forward slash okay that's great and now the last thing that we need is the on close property on close is going to be equal to we're going to have a callback function and then we can say set video open is equal to false of course we don't yet have the set video open and video open so let's scroll to the top and then in there we can create a state field called video open so const video open and set video open that's going to be equal to use state and then at the start it's going to be false great now we have our modal let's save it and let's go back to our website to see if it actually works i'm going to expand it all the way there looks really good i'm going to click play and our video opened up instantly that's great you can play it we also have the close icon on the top right or you can close it by simply clicking away and that works beautifully if we scroll down you'll notice that the next sections that we have to cover are going to be the feature and core feature sections so let's go ahead and do that let's open up our file explorer go to the sections part and we're focusing on the feature section right now as you can see we also have some dummy data but this is the important part our features section is going to use a few components we've already created so let's start with a section it is a section after all that has the sx equal to and then we have a variant that's equal to a string of section dot feature then inside of that section we're gonna have a container and inside of the container we're gonna have a section header remember this was one of the components that we've already created it is a self-closing component that accepts a slogan and it also accepts a title we can go ahead and check it out by control clicking it and take a look section header component we have a box with a text and a heading we created that previously so now we already have the jsx we simply have to pass props that's the power of react our slogan is going to be something like quality features and our title is going to be amazing useful features i know this is not something that you would use on a real website but for now it's going to be more than enough below our section header we're going to have a grid that grid is going to have the sx equal to styles dot grid and then inside of there we're going to map over this data so it's an array with four pieces of data we had something similar to that if you scroll up you'll see it right here these four icons with the corresponding content are really similar to features that we're dealing with right now so inside of that grid we can say data dot map inside of there we get each data item and for each data item we want to show a feature card before if you remember correctly we had a feature card column this now is just a feature card so let's create that component let's find where a feature card is it's right there and let's see if it maybe has some differences or similarities to our feature card column so if we open up our feature card column we can see that it was a box with an image and yet another box inside of there and our feature card is going to be incredibly similar so right now i'm going to copy this entire part from our feature card column and we're going to paste it in our feature card okay i just pasted it in there and let's see if there are some things that we have to change nope that's going to be it so looks like the difference between the feature card and the feature card column is only in the styles but that's provided for us so in this case the jsx for feature card and feature card column is exactly the same with that said we can go back to our feature card and if we just save this we of course have to pass some of the props into it so which props are we going to pass into our feature well as before we have to pass a key which is going to be equal to item dot id we also have to provide the image source which is going to be equal to item dot img src then we can provide the alt tag which is going to be equal to item dot alt text and we're going to have a title which is going to be equal to item dot title and finally text which is going to be equal to item dot text if we now save this you can see that we get more of these features but this time they are not in a column we can see them in a nice looking grid two by two quality features amazing useful features whatever you want to call it looks good feels good and you can change the content of course just by going to here and then changing the text the title and so on so our features were quite easy because we already had the components done but the next part is our core feature so this is a feature that we really want to emphasize so let's head to the core feature section and inside of there you can see we have the data for the core feature but we are yet to code out the component our core feature is going to be similar to what we had so far it is going to be a section more specifically a section that's going to have the sx equal to variant and that's equal to section dot core feature in a string then we're going to have a container to center it all that container is going to have the sx equal to styles dot container box inside of our container we're going to have our box and that box is going to have the sx equal to styles dot content box just like this inside of that box we're gonna have a familiar component that's called text feature if you remember correctly this is the component that we've used before we simply have to provide some of the parameters to it let's see where did we use it before so if i open up our search and if i search for text feature you can see that we've used it under service section so if we go right there into our service section if i remember correctly that was this part there we used a text feature and in there we passed only a subtitle and a title inside of here we're gonna pass a few more props so in this case we're gonna pass everything that we build this component for remember subtitle title description and the button name so let's see what is it going to be our subtitle is going to be equal to data dot sub title then we're going to have a title which is equal to data dot title and then again all of the data is coming from right here at the top just so we don't have to hard code it then we have a description which is equal to data dot description then we have a btn name which is equal to data dot btn name and then we have a btn url which is equal to you guessed it data dot btn url great if we save this and scroll down we should immediately see this text feature not only do we have a title and a text we also have a nice looking button finally below this box we're going to have one more box which is going to have the styles of sx is equal to styles dot thumbnail inside of there we're going gonna have an image an image is a self-closing tag that's going to have a source which is equal to feature thumb which is a feature thumbnail and the alt is going to say thumbnail and just below that we're gonna have one more box this box is gonna have the styles equal to styles dot shape box and inside of our shape box we're gonna have one more image this image is again a self-closing tag that's going to have the src equal to shape pattern and it's going to have the alt prop equal to shape if we now save this we get this nice shape below the image so now let's see the desktop view there we go we have the image with the shapes on the right side with all the core features and the button on the left side looks good to me we still have quite a few sections to do we have workflow package which is actually pricing that's going to be one of the more difficult sections because it has a lot of mowing pieces then we have a team section testimonial card and finally a footer but if we just scroll to the top of this website you can immediately see how this is slowly starting to come together it looks really good we can scroll to different parts of the website it seems well thought out we can click there to get a specific video we can scroll to see more features and we have some nice call to action buttons right here i'm not gonna keep talking anymore let's code out the remaining sections next section on our list is the workflow so let's open up our file explorer and let's find a workflow section inside of here as usual we have some data in this case the data is going to be consisted of four different steps so if we scroll down you can see the workflow part right there and as usual that is going to be a section our section is going to have the style equal to styles.workflow just inside of there we're going to have a container tag and then inside of that container we're gonna have a section header this is a component that we've used many times so far our section header is going to have a slogan and in there we can say absolutely anything let's try to copy the things that we had in our last one and that was something like this what's the function and then inside of our title we can do the same thing meet the feature of our product again doesn't really matter what's in there the only thing that matters is that we know how we can replace that and we can make it custom for our own specific needs there we go our section appeared and opposed to the last section header we used in this one we're also going to provide one extra parameter and that is is white we're going to set the property as white to be equal to true and that way you can see that our colors have changed and why is that the case well remember inside of the section header before we added these specific styles that correspond to that specific property if it's white then we're gonna lower the opacity and we're also going to make the text wide we're also going to do the same thing for the heading so beforehand we created this component and now we can use it in a few different use cases and below that still inside of the container we're going to have a grid property our grid is going to be sx is equal to styles dot grid inside of that grid we're going to map over the data that we have declared at the top so inside of there logic jsx block data.map and then inside of that data we're going to have an item and we want to show something for each one of these items for each item we want to show a box that box is going to have the sx equal to styles dot card and we also have to provide a key because we are iterating over something the key is going to be equal to item dot id inside of that box we're gonna have one more box and this box is going to have the sx is equal to styles dot icon box this box is going to be for our icon and then in there we can say something like this we can open a dynamic jsx block inside of there we can say a string and then 0 and then item dot id as soon as we save that you'll see that we get these bubbles with 0 1 0 2 0 3 and 0 4. we can also just use the item id then it's going to be 1 2 3 4. this is just a stylistic preference you can choose anything you want but now that we have those numbers let's also provide some content next to them for that reason i'm going to create another box that box is going to have the sx equal to styles dot wrapper and inside of that wrapper we're going to create a heading and we're also going to create a wrapper that heading is going to have the sx equal to styles.wrapper.title and then inside of there we're going to render our title by saying item dot title now below this heading we're going to have a text property that text is going to be really similar sx is going to be equal to styles.wrapper.sub title i think we had used this before and then inside of there we're gonna say item dot text if we save that you can see we have four different steps they appear in a grid but if we expand it they're gonna appear in one row and we even have these arrows in between them let's see how it looks like on mobile so this is the mobile device and they just appear one below another looks really clean if you need to explain your software or your service to people you can do that with this section in four easy steps next we're gonna focus on the pricing or the packages section this is a more complex component but i'm sure we'll be able to do it and i hope it's going to make complete sense i'm going to close our tabs right there just so we clean our workspace a bit and let's open up our file explorer and open the package.js as you can see the data for this specific file is quite long we have about 200 lines of the packages so what you can do is you can copy this and then extract it into a completely new file for example in the source file you can create something like data and then in there you can create a file called package and then you can simply import it right inside of here again this is not something that you have to do but if you want to use this project for your own purposes and you want to change all of these things then it would be nice if you separated the data or the content from the jsx or the representation with that said let's scroll down and let's start creating the layout for our package inside of here we are destructuring the monthly from the annual plans from the packages and i also prepared for you all the slider parameters we're gonna have to pass these parameters into the slider component we're going to use but for now let's scroll down and let's start creating the layout as usual we're going to start with a section our section is going to have the id of pricing and we're also going to have the sx equal to variant and then section dot pricing below that we're going to have a container and then inside of that container we're going to have a section header we've already used our section header quite a few times so by now you should know that it accepts a slogan which is equal to let's do something like pricing plan and then it also accepts a title and for the title let's do something like choose your pricing plan great now if you save that let's see if it appears down there there we go choose your pricing plan and then below our section header we're going to have a flex container so you can simply say flex and we can give it some styles sx is equal to styles dot button group and then inside of that flex we're gonna have a box that's gonna contain all of our buttons our box is gonna have the styles equal to styles dot button group inner so this is going to be the inner part of our button group inside of the box we're gonna have two different buttons so let me create it and we're gonna expand the first part of the component so that we can enter some props into it our button is going to have a class name equal to now we want to give this button a class of active if monthly plan is currently selected if the annual plan is selected then we want to remove this class from the monthly and give it to the annual plan we can do that by using states i'm going to scroll to the top of the component and then there i'm going to create a use state field we can say something like const and let's name our state state and we're going to use set state as well that is going to be equal to use state and in this case our starting state is going to be equal to an object that contains the active which is equal to monthly at the start and also it's going to contain the pricing plan which is going to be equal to all the data from the monthly packages you can see we're setting the active to monthly and the active pricing plan to monthly that's coming from packages what do i mean by that well that is all the monthly data that you can see right in here with that said we also have to create a function that's going to handle pricing plans so let's scroll down and then in here let's create a const handle pricing plan that is going to be equal to a callback function that function is going to take in a plan as a parameter and then in there we can have an if and else statement we can say if plan is equal to annual in that case we want to set state and we want to set it into an object first we're going to set the active to be equal to annual and we're going to set the pricing plan to be equal to annual as well so this works that we call the handle pricing plan we specify the plan we want to select and then in here if the selected plan is annual then we want to set the state to contain the annual plan we can also put this in one line like this and then in the next line we're going to simply say else so if it's not annual it has to be monthly and then in there we're going to copy this line and we're simply going to change the annual to monthly as well as monthly right in here great now we have the state and we also have a function that can handle our plan let's scroll down and now in here we can choose whether this is going to have the class of active or not what we can do is we can say state dot active if that is equal to monthly then we're going to display a class name of active else we're going to simply put a class as an empty string then we're going to have a type which is equal to button and we're also going to have the area label equal to monthly below we also need to have an on click and their on click is going to be equal to a callback function that is simply going to call handle pricing plan and in there we're going to pass in the plan we want to select in this case it's going to be monthly and finally what is our button going to say well it's going to say monthly plan now if we save that you can see that our button appeared our second button for choosing the annual plan is going to be really similar we can basically copy this button and paste it below what do we have to change well if this stay that active is now annual then we want to show class active and in here we're going to change the area label to annual as well and finally we're going to change the handle pricing plan to annual as well and at the bottom we're going to say annual plan if we save that you can see that now we have two different buttons currently the monthly plan is selected and with using states and the handle pricing plan function we created we can now switch between those states looks really good right but now that we have this functionality working below that we want to display the pricing plans or the data for the pricing plans depending on the currently selected option so just below this flex we're going to create a box that box is going to have the sx equal to styles dot pricing wrapper it's also going to have a class name equal to pricing underscore underscore wrapper and inside of that box we're going to have that carousel component we talked about let's see what this carousel is i'm gonna scroll to the top and then there you can see that we're importing carousel from react multi carousel let's see what that dependency or that package is doing again as always when you want to learn about something simply google that package and open up the npm page this one has 62 000 weekly downloads which is not bad and let's read what it does it's a production ready lightweight fully customizable react carousel that supports multiple items and ssr which is server side rendering and in this animation you can see how it works this is exactly what we want for our pricing plans of course if you want to learn more you can go read the docs and you can see what properties does it accept but for now since it accepts a lot of properties i've prepared them all for you right in here let's go through them quickly we're not going to have additional transform we're not going to have arrows autoplay is going to be 3000 milliseconds it's not going to be centered it's not going to have any extra class names slides to slide is going to be 1 items 3 and so on as you can see these are just some of the parameters that you can pass to a slider to make it custom so let's add those parameters right there we can pass all of them into this component by opening a pair of curly braces and then there we can spread so da da da slider parameters or slider params great now inside of there to be able to see that carousel we have to provide some plans to do so we can enter the dynamic jsx block and then in there we can loop over our pricing plans that's going to be state dot pricing plan and this is going to be different depending on if we're currently selecting monthly or annually and then in there we can say dot map in there we're going to get something like package data and we can display something for each package data what are we going to display well it's going to be a box that box is going to have the sx equal to styles.pricing item and it's also going to have a key our key can be something like package data dot id finally inside of that box we're going to render one more custom component that we are going to create so it's going to be called price card once we create this price card we also have to pass data to it so we're going to say something like data is equal to package data you might be wondering what is this price card but if we scroll up you can see that we are importing that from our own components so let's go ahead to file explorer to our components and let's find our price card there it is and as you can see it's accepting some data that we are sending to it and then in here we have to code it out that price card is going to contain all the data about a specific pricing point like a header name description pricing unit button text and other options and points instead of this simple heading price card let's create a real card so inside of here we're going to have a class name and that class name is going to depend on if we have a header or not so we can say if there is a header in that case may the class name be package underscore underscore card and active and if we don't have a header that means that it's not active so we can simply display package underscore underscore card and we're also going to provide some sx styles that's going to be equal to styles dot pricing box great so what are we going to put inside of this card well let's start with header we're going to say if we have a header then display a text component so we're going to have a text that text is going to have the sx equal to styles dot header and then we're simply going to display a header this might be a good time to check what we currently have so i'm going to collapse this and then inside of here let's check out our current landing page really good as you can see we have three different cards this one even has the suggested on it but as you can see they are pretty much empty so let's add some content i'm going to expand our code and let's continue below the header we're gonna have a box that box is gonna have no styles but inside of that box just for layout purposes we're gonna create one more box this one is going to have a class name that is equal to package underscore underscore header it's also going to have the sx which is equal to styles dot pricing header and that box is simply going to contain a heading and a text so let's start with a heading our heading is going to have a class name that's going to be equal to package underscore underscore name and variant is going to be equal to title inside of that heading we're simply going to display the name of our current pricing package you can see this one is a free plan and take a look if we're in mobile this care cell really comes in handy now we can scroll through different packages that's why we use that dependency from mpm let's make it even more meaningful and add a text below this text is going to appear as a p tag so we're going to write that there and then inside of there we're going to render our description as soon as we save that you'll see that now we have a small description and we can keep scrolling to see more below this entire box we're going to have a list let's see where our list is coming from so if we scroll to the top you can see that we're importing a list from dot slash list that is yet another component so this means that it's entirely possible to have components inside of components so let's check out our list inside of our list we're going to create a component that's going to loop through a few list items and display them nicely so inside of there we can start with a box and then that box is going to appear as a ul so we can say as ul that stands for unordered list we're also going to give it some sx which is equal to and then we're going to make some more dynamic styles list style type is going to be equal to none then we're going to have a margin which is going to be equal to 0 as well as the padding also equal to 0 and then we're going to spread all the parent styles right there we're getting the pairing styles through props inside of that box we can loop over the items we'll be passing as props as well so to do that we can open a dynamic block and we can say items dot map inside of there we're going to get a specific item and we want to display something for each item for each item we're going to display a flex container and let's add a few properties to that flex container it's going to have a class name and the class name is going to depend on one of the items properties so our item is going to have a few properties it's going to have the icon it's also going to have the text and it's also going to have the is available option on it so if the is available is true then our class name is going to be open else it's going to be equal to closed let's save that and in the price card let's make sure that we are passing something into our list so in our list we have to pass items equal to points again points are coming from our data as you can see right here we just destructure them so it's easier to write it out our list is also going to have a child style which is going to be equal to styles dot list item now let's save that and let's see if some list items have appeared well right now we have an error because we haven't yet finished the list inside of here i said that the item is going to contain these three properties but they don't exist by themselves so we have to say item dot is available if we save that let's see if something's gonna appear i'm gonna scroll down and nothing yet because we have nothing inside of the flex so that's gonna be the next thing that we can add our flex is also going to have the ask property and it's going to appear as an li list item considering that the box is ul this is going to be an ally inside of there we also want to have the sx and then we want to spread all the child styles remember we're passing over child styles from the price card through props into this component and in here make sure that you have double curly braces and then you can spread it finally since we're looping over something we need to provide a key and that key is simply going to be i that we can specify from a map so the question is what do we want to render for each item and that is going to be an icon button okay that icon button is going to have the sx which is equal to styles dot list icon and it's also going to have the area label which is going to be equal to list icon but that's going to be a string of course list icon finally inside of the icon button we can render the icon and just below the icon we can render the text again both the icon and the text are coming from our item so we can remove this and say item dot icon and item dot text let's save it scroll down and take a look at that we have some content here and we have this nice checkbox and as you can see if the item is not available then there is no checkbox there is a cross right there this looks really clean now let's close the list and let's continue creating the price card we also have some more items below the list below the list we're going to have a text property that text is going to have a class name and that class name is going to be package underscore underscore price it's also going to have the sx which is equal to styles dot price finally inside of there we can display our price width unit and we can also create a span element and then in that span we'll say forward slash and then something like monthly let's save it and take a look as you can see that's 15 dollars monthly and as we scroll it's going to be 24 and the first one is going to be zero dollars monthly finally we're going to create another box for a button group so we can say box and then the styles are going to be equal to styles dot button group we're going to have two buttons there the first button is going to be like this and we're going to pass a few props into it the first one is going to be variant of primary and also area label is going to be equal to button text and finally we're going to render that same button text inside of the button so let's save it and as you can see we get start free trial in this case we have create an account and in this case we have create an account as well it's dynamic because we then say simply here start free trial we passed in a dynamic attribute now some of the options are going to have multiple buttons so below this one we're going to open a dynamic block and we're going to say if there is another option in that case render the following code and that following code is going to be yet another button that button is going to have a few props the first one is going to be a variant and the variant is going to be equal to text button then we're going to have a class name our class name is going to be equal to free underscore underscore trial and finally the area label is going to be equal to another option our button is going to display the text of another option as well that's dynamic so if it appears let's take a look okay we can see it right there if i hover over it my mouse turns into a cursor but it's white we have to have it as black just to skip the debugging process in this case we're going to do it inline we can say sx is equal to and then open double pair of curly braces we can say something like color is equal to black and then if we save that you can see that the button has appeared we have a big create account button and then or start 14 days trial right there the first button has only one button so the text is not going to appear now let's collapse our code editor a bit and see how do these options look like on desktop there we go take a look at this choose your pricing plan we can switch between monthly and annual plans and if i click it it instantly changes this definitely looks good we also have these text buttons below these ones and these have a short hover animation if you want to use this for selling something like a software or some products you can definitely do so i'm sure these are going to convert really well i just noticed that we're not quite done yet with the pricing plans if we scroll down you'll see that we have this button group heading appeared from nowhere now if we collapse this a bit and make it mobile you'll see that we currently have just one plan but there is no indication that there are others so if i scroll i can see them but the user that comes to your website is not gonna know if he needs to scroll or not for that reason we have to provide some button group indication that he knows that he can go left or right let's do that right away first let's find where that button group is well if we go to sections and then package right in here under slider params you can see that we have custom button group that custom button group is our custom component we can scroll to the top and we can see that we have our button group which is coming from components so let's head to components and go to our button group right inside of here we have to create some nice buttons to simply explain the user that there are multiple plans that he doesn't immediately see if he's on mobile these buttons are not going to be that hard we're going to start with a flex container that flex container is going to have the sx which is equal to off width and then a hundred percent that has to be in a string then inside of the flex we're gonna have a container and inside of the container we're gonna have a box that box is going to be a button group so we can give it the styles of styles dot button group and it's also going to have a class name which is equal to a string of button underscore underscore group now in there let's place two buttons our first button if we created like this it's going to have an on click property on click and in there we're simply going to pass previous that previous is coming from props right there it's also going to have the area label that is going to be equal to previous and then inside of there let's use an icon and that icon is going to be io ios arrow round back finally we can copy this button paste it below and then this button is going to be our next button so on click we can go next area label this shouldn't be area hidden that was a typo so i'm going to exchange this for area label is going to be next in this case and then we can use the i o ios round forward that's going to be our icon and we're done with the button group let's see how does it look like as you can see we have those two buttons that we can navigate around with they don't look that good they look like two basic buttons and that's because in here it shouldn't be styles.button it should be styles.buttongroup that's going to be the correct class and there we go it instantly makes it look a lot better now the user knows that he can either click those arrows or he can manually swipe and get different plans with that said we can go back to our sections and the last section we worked on was the package or the pricing section this part is now fully done let's expand it one final time and see it in action there we go here are our monthly and annual plans we can switch between them states are switching we have the prices as well as the buttons and the secondary call to actions we're getting close to the end of this great project but we still have three sections to do the team section testimonial card and the footer so let's go ahead and get started with the theme section let's expand our code and find our team section under sections there is a team section and at the top you'll see that we have the data for all six of our demo members of course you can change the names the titles the designations and you can add your own you can add or remove members but for now we're gonna use this data to create the layout and then to present it our theme section is going to be similar to other sections we've created it's going to be a section inside of there we're gonna have a container to center everything inside of that container we're gonna have our component called section header as we've learned our section header accepts a slogan the slogan is going to be our theme and then we can also accept a title our title is going to be the most qualified and talented individuals okay now if we scroll down you'll see that we have our team and we have our header but now let's add a grid with our actual team members so just in here we're going to create a grid component that grid is going to have sx which is equal to styles dot grid and then there we're going to loop over the data so we can say data dot map we're going to get each data item and for each data item we're going to show a team card this theme card is our custom component so now let's see what do we have to pass into our team cart we need to pass the source alt text title designation and social so let's do that and then we're going to create our team card which now doesn't do anything first we have to have a key because we're looping over something and that can simply be item dot id then we're going to pass the source of the image and that's going to be dot img src then we can pass the alt text our alt text is going to be equal to item dot alt text then we can also do the title title is going to be equal to item dot title then we have the designation and that's going to be like this designation is equal to item.designation finally we have social and we're going to have that as item dot social profile great now we're passing all of the required data into our team cards and now we have to go into our component and create the jsx layout to actually present it each one of our team cards is going to be a box that box is going to have the sx equal to styles.card then we're going to have an image so you can create a self-closing image tag it's going to accept the src equal to src remember we're passing that through props we're also going to have the alt which is going to be equal to alt text and finally we're going to have the sx which is equal to styles dot member thump as in member thumbnail if we save that we should already see images for each one of our users below our image we're going to have one more box this box is going to have the sx of styles dot info wrapper then we're going to have a heading that heading is going to have a class name of info underscore underscore name and it's also going to have the sx which is equal to styles dot info wrapper dot name and inside of there we're going to display our title then below that we're going to have our text so we can create a text component that text is going to have a class name which is equal to info underscore underscore designation we're also going to have some sx styles so we can say sx is equal to styles dot info wrapper dot designation and finally in there we're going to render our designation like so great so now we're displaying the title and the designation and as you can see this already looks so much better finally we need to display some of the social profiles of each individual person to do that just below this box we're going to create one more box and that box is going to have the sx which is equal to styles dot social share we're also going to have a class name and class name is going to be social underscore underscore share inside of here we're going to map over all of our social profiles that's going to be social that we are passing as props right there and we can say social.map we're going to have an item and for each item we want to display a link to their social media network so we can say link we can provide a key which is equal to item.id we can also provide an href which is going to be equal to item.path and we can also provide a class name which is going to be equal to item dot name finally inside of the link we're going to display item dot icon if we save that you should see all of the social media icons appear and they're all clickable if you add the link to them great our team section is now done let's see how it looks like on desktop take a look at that images are bigger we even have cards when you hover over one specific person and the social media links appear on the bottom right side great finally we need a testimonial card and a footer so let's knock these down our testimonial card is right in here let's expand our code first and again right there we have some data that you can modify you can change you can make it completely your own but let's go to our actual code right in here we have to exchange our testimonial card to make a testimonial card we're going to use a carousel the same carousel we used before that's why it's good to use certain packages you can reuse them over and over again and then you can provide different props to them or params so that you can make them different to work with different use cases before we had our carousel to swipe through these pricing offers but now we're going to have our carousel to go to our testimonial card so to start off we're going to create a section this is the last section of our website so it's going to have the id of testimonial then we're going to give it some styles sx is equal to variant and then section dot testimonial below that we're going to have a container in this container we just want to provide some simple styles so we're going to say css is equal to and then again one more object inside text align is equal to a string of center so we just want to center whatever is in there in this case that is going to be our section header which is a self-closing tag that has a slogan which is going to be equal to testimonial like this and we also have a title and the title is going to be equal to meet client satisfaction okay if we save that you should see that right there we have testimonial meet client satisfaction i just noticed that i misspelled testimonial a few times so i'm just gonna fix it right there and right there that's gonna add some padding to our styles below our container we're going to have a box and that box is going to have the sx which is equal to styles dot carousel wrapper and inside of there we're gonna have our carousel again a carousel is the component coming from the carousel package and then there we can pass all of the props by creating a dynamic block and then saying dot dot carousel per amps this way we're going to spread all of these params into our carousel finally we have to map over the data that we want to display inside of our carousel to do that we can open a dynamic block and we can say data.map there we're going to have an item we're mapping over and we want to display something for each one of these items more specifically we want to display a box that box is going to have the sx equal to styles dot review card and it's also going to have a key equal to item dot id i see that i'm missing an x right there and inside of that box we're going to have a rating component into our rating we're going to pass a prop of rating that's going to be equal to item dot review and what is this rating well if we scroll to the top you can see that a rating is a component that we are yet to create so if we go to the top of the components there you'll see rating and we have to implement the logic for the rating inside of our component we're going to accept a rating because that's what we passed and then there we can create a new constant variable called total rating and that's at the start going to be equal to an empty array and then below that we're going to create a for loop we're going to say let i is equal to 0 i is less than 5 and then i plus plus basically we want to loop from 0 to 4 5 times to display the number of stars between 1 and 5. to do that we're going to say if i is less than rating then we want to push something into the rating so we can say total rating dot push the thing that we want to push is going to be the li like this that li is going to have a class name equal to star and it's also going to have a key equal to i and inside of that li we're going to have the fa star which is basically just the icon for the star then if the rating is higher than i in that case we're going to have an else and then we can say total rating dot push and in that case we want to push an empty star so we can say li then we can provide a class name which is equal to star o and the key is going to be equal to i and inside of there we're going to have the same fa star great so now we're pushing stars depending on how many do we have in each rating and we're pushing them to the total rating finally we have to display that so just at the bottom we're gonna create a div that div is going to have a class name equal to rating and then inside of there we're going to have an unordered list ul and inside of that list we're just gonna have the array of total rating just like that and as you can see we already have four stars on the first one if we keep scrolling we get five five four this is really good the rating is being displayed now we can go back to our testimonial and we can continue creating the content below our rating we're gonna have a heading this heading is going to be as h3 so it's gonna appear as a heading three and it's also going to have the sx equal to styles dot title finally inside of there we're gonna use the item item.title because that's the text that we want to display if i save that you should see modern look and trending design finally below our heading we also want to have a text component this text is going to have the sx equal to styles dot description and in there we're going to render the item dot description if we save that it should give us a bit more insights about what are the clients thoughts finally so that we can know who wrote that testimonial we can create one more div below the text right in here that div is going to have a class name and that class name is going to be equal to card footer inside of that div we're going to have yet another div and this div is going to have a class name equal to image inside of the second div we're gonna have the image tag and the image is going to have the src equal to item dot avatar finally as the alt we can put something like client image if we save that we should already see the image of the client who wrote that let's move ahead and there we go now below this image div we're going to create one final div and this one is going to have a class name right in here class name is going to be equal to reviewer dash info inside of there we're going to have a heading that heading is going to appear as an h4 tag and also sx is going to be equal to styles dot heading inside of there we can render the item dot name if we save that you can see that the name danny here appeared we also have danny and looks like all the people are danny but now let's also add a text just below that if we add the text the sx has to be equal to styles dot designation okay and the actual info in there is going to be item dot designation if we save that take a look now we have dennis username and they're all benny hill great let's expand it and see how does it look like we have our great team section and just below meet client satisfaction we can scroll through these really smoothly right on desktop looks really good we can also use the arrows or if i collapse it for mobile view again we have only one per view and we can keep scrolling to the right or we can go back to the left read the reviews and take a look at our header we can immediately get started if you're already convinced that your company is offering something good finally the last thing that we have to do to make this fully complete is the footer after we're done with the footer we're gonna start with the deployment process our footer is just a component so we can scroll up in here you'll see the footer data js with all the links and also footer.js file inside of here as always we're going to implement the code for the footer so let's start with the footer semantic html tag inside of there we're going to have the sx which is equal to styles dot footer finally we're again going to have a container to center everything out and we're then going to have a box inside of that container that box is going to have the sx equal to styles dot footer dot footer bottom area quite a long one then inside of there we're gonna have a link and that link is going to have a path equal to just slash of course you can add anything in here inside of the link we're just gonna have our logo image so we can say image and then in there you can say src is equal to footer logo the alt tag can be just something like logo let's save that and let's see our footer starting to come together technically we could also leave it like this but let's add some more links let's add one more box below our link right in there that box is going to have the sx equal to styles dot footer dot menus and inside of there we're gonna have a nav tag inside of that nav we're gonna loop over the data so we can say data dot menu items dot map and then there we have each one of the menu items and we want to render something for each one the thing that we're going to render is simply going to be a link which is going to be a self-closing tag this link is going to have a path this link is going to have a path which is going to be equal to item dot path it's also going to have a key which is going to be equal to our index so as the second parameter let's grab our index we're also going to have a label which is going to be equal to item dot label and finally we're going to have the styles sx is equal to styles.footer.link if we save that well if we save that you should see an error because this here is going to be menu item not menu items plural so if we fix that typo and scroll down you should now see all the links appear at the bottom finally what would a website be without a little copyright notice so just below this box let's create a text element this text is going to have the sx equal to styles dot footer dot copyright we can say copy write and then we can do something like buy and let's add a dynamic block of code and say new date and that gives us the date object but we can call the dot get full year that's going to give us a current year and finally at the end you can enter your company name great if we save that you should see that copyright appear at the bottom our footer is done and with it our entire website is now completely done let's check it out one more time from top to bottom and then we're going to deploy it using host finger so if we keep scrolling down we can see top quality digital products to explore we have our image and the svgs behind we have the best features of our product as well as the services that we offer then we have the clickable iframe where you can play a video scrolling more down we have more amazing features scrolling down we have one more core feature as well as the get started button going down even further if the user didn't yet understand your product you can explain it right there in four easy steps moving forwards we have our pricing plans monthly as well as the annual we have the team of people that work in our company as well as the testimonial section where some people left some nice reviews finally we have a footer and we are ready to get started so this is a website that you built using nextgs if i refresh you can see that it is extremely fast and now we're going to deploy it so what are the steps that we need to take to deploy our website well first we're going to go back to our code and inside of here we're going to close all the files and open up justpackage.json our package.json is right in here and let's go to the scripts portion right in here you can see it i've prepared for you a build script usually in here you can see just next build but i've added next build and next export this export part is going to take the entire code base and then put it in a nice folder that you can then drag and drop and deploy anywhere so to build out our application let's stop it from running by pressing ctrl c and then y and finally you can simply run mpm run build this is going to take a minute and then we'll be right back once our terminal is done running you should see that on the right hand side we have one extra folder and that is the out folder in here we have our entire website bundled up in static assets with our index.html page this is different from react because all the content is exactly in here in this index.html that means that it's going to be easier for website crawlers to find your content and index it higher on google you can deploy this website with some of the free hosting providers but in this case since speed really matters and this is a business website we're gonna be using hostinger for the speed that it provides the faster the website loads the higher is it gonna rank on google and other search engines in my case i've decided to take the js jsmastery.net domain name as well as the hosting now i'm going to show you how we can set up our hosting and display our next.js website first thing that we have to do is go to hosting and then manage right inside of here we're gonna scroll down and we're gonna go to file manager that's going to open up a dashboard and then you can go under this public html inside of here you'll see that we have a default php site you can delete that once you've deleted this file you can open your visual studio code find the out folder and then reveal in file explorer then you can open it out and simply drag and drop all the files from that folder there we go you can click upload and that's going to be it it is going to take just a minute while that is doing its thing let's open up our visual studio code one last time and i want to go to our package.json in this project we've used next build and next export and this is great for static websites this nextgs is a single page application without any dynamic things happening to it but sometimes you're going to encounter next.js websites they're not simply statically rendered they have some dynamic parts in that case our current deployment process is not going to work and you have to host it differently i just wanted to point that out with that said let's go back to hostinger and let's wait for our process to be finished you might see one error appear but don't worry about that if you go to your domain in my case it's going to be javascriptmastery.net in your case it might be a dummy domain or something different you should see our website live and ready here it is hosted under a special domain now if i copy this and if i paste it and go ahead and click enter as you can see it's instantaneous this website is extremely fast and that's partially to next.js and most importantly to hostingers hosting you can see that our website doesn't currently have ssl so let's go back to hosting search for ssl and just click it there you can see that it failed so we just have to click reinstall and in a few moments our ssl certificate should be ready and our website is going to be https hosted take a look at that there's this little lock and our connection is secure again the process is extremely easy and i cannot recommend hostinger enough with that said that's it for this video i hope you enjoyed i hope you learned something new and i hope that you're gonna use this website for your own purposes of course after you change some details that make sense to you youtube algorithm is being strict lately so a like a comment and subscribe would definitely mean a lot thank you so much for watching see you in the next one and until then have a wonderful day [Music]

Channel: JavaScript Mastery

Views: 86,053

Rating: 4.9554496 out of 5

Keywords: javascript, javascript mastery, js mastery, master javascript, nextjs, nextjs project, next js, next js tutorial, next js app, next js application, next js landing page, next js optimization, next js portfolio, next js project, next jest project tutorial, next js website tutorial, next js website, next js landing page tutorial, build a next js app, next js build, next js deployment, next js hosting, hostinger, learn next js, next.js project, next.js vs react, next js react

Id: iGBERMGMIvc

Length: 140min 43sec (8443 seconds)

Published: Fri Apr 30 2021

Reddit Comments

[u/HolidayInternet]

Next.js is technically React, so I decided to share it in this subreddit :)