Build and Deploy a Modern Next 13 Website With Framer Motion & Tailwind CSS

hi there and welcome to a project video where you'll build and deploy a modern x13 website with framer motion and Tailwind CSS metaverse we have been hearing about it and imagining it for quite some time now we'll make metaverses a metaverse concept landing page building this single web app with me will give you the knowledge needed to build any website you can imagine many tutorials teach you how to create a website with a navigation bar a few divs and a footer boring right today you'll learn how to develop a professional website using the most in-demand Technologies and deployed to the Internet so you can share it with your friends potential employers and put it on your portfolio this video is perfect for you if you want to learn how to transform a figma design into a fully functioning website if you want to improve your CSS skills and if you want to learn how to create a modern and responsive website and best of all while building this beautiful website you learn the most modern Technologies today next she has 13 palaven CSS and framer motion nothing is better than learning these Technologies on a real world project you might be wondering what are the prerequisites for building such a fantastic website this course is entirely beginner friendly we're going to start simple and then move to more complex Concepts I'll explain every step of the way from arranging the files creating functional components using Hooks and writing clean code all the way to deployment this design has been created by the outstanding designers of the one week wonders agency show them some love by checking their other designs the link is in the description while developing this app you'll learn react project architecture and clean code best practices next 13 application structure fundamental CSS properties to Master Flex using Tailwind CSS from soft and pleasant animations to complex gradients using frame or motion perfectly placed media queries for satisfactory responsiveness covering almost all devices and at the end you'll learn how to deploy your website to incredibly fast servers and give it a custom domain name if this video reaches 20 000 likes I'm recording another modern UI and ux video oh and I almost forgot we are running a special Black Friday sale on jsmastery.pro there you can get three complete courses a 10 hour course in which you can master all essential parts of modern JavaScript to have a solid foundation to learn react an 8 Hour course where you build a Netflix clone and learn the best industry practices for reacts.js a 12 hour course in which you build an nft Marketplace and learn the bleeding edge of web 3 technology if you've never bought one of my courses before you can save 250 dollars off my courses by getting them in the special Black Friday bundle for those who already bought some courses you can get forty percent of the other courses and complete your skill stack the sale lasts only until the 29th of November so click the link with a discount in the description and get the courses while you can if you're watching this video after the sale is over you can still get our usual YouTube subscriber discount with that said let's dive into the video foreign [Music] before we start building out our project let's first get the hosting and the domain name for a new site your portfolio or any website you'll create in the future hostinger is my personal recommendation and right now they're offering crazy Black Friday deals so I simply needed to show this to you the link with an extra discount is in the description let's click the claim deal button and as you can see right now hostinger offers an 80 discount for a four year subscription to the premium shared web hosting plan for about two bucks a month you can host 100 websites and you'll even receive a free domain this deal is of course valid only for a limited amount of time hostinger offers an excellent price to Quality ratio high-speed servers and most importantly 24 7 chat support this Black Friday deal is an absolute steal I mean two dollars a month for hosting 100 websites and you also get a free SSL certificate which means you'll have https security you also get a free email and most importantly a free domain name all of the features you'll get with this hosting plan will make all the difference since I've partnered with hostinger they decided to give you an even bigger discount you can find the link and a unique discount code in the description enjoy once you visit the link in the description click claim deal and then add to cart here we have to choose the period of our hosting with a crazy discount going on right now I'll definitely choose 48 months to save the most money and down below you can choose your payment method but even more importantly you can enter a custom coupon code I prepared for you so just click right here and type JavaScript Mastery all caps no spaces and click apply there we go the coupon has been applied and you can safely make a purchase after you complete the checkout you'll be redirected to the hostinger's dashboard I'll see you there this is your guided setup so let's go ahead and click Start now in here you can choose to create a new website which is exactly what we're doing in this video finally you can choose WordPress hostinger website builder or you can Skip and create an empty website finally you can claim your free domain name which you got with your special deal in this case I'm going to click select and let's try to get metaverses and let's go for.com if we search for this most likely it's going to be taken Yep this is such a good one but if we go with something like metaverses Madness as that's what we have on our home page and click search you can see this domain is available of course you'll have to get something different because I'm getting this one for myself you can pause this video think about the domain name a bit and then select it right now or you can even skip this process and then choose the domain name later on but with that said let's click continue in here you can choose your server location and click finish setup there we go metaverses madness.com is being registered perfect I want you to instantly dive into the development process and allow you to focus on learning what really matters that's why I prepared a special starter repository for you this repository just contains a simple setup but you will call the actual logic components and the layout from scratch the link to download the starter repo is in the description once you download it simply right click it and then extract it you can extract it on your desktop rename it to metaverses and finally drag and drop it into your code editor of choice in this case we'll be using the most popular editor out there visual studio code once you do that you'll see that we have quite a few files and folders right here so let's explore them one by one first we have the app folder the most important folder in nextgs's 13 structure Yes you heard that right we're using the latest and greatest of what next 13 has to offer that's why you can see a special head.js file a layout file and a page.js file inside of the page I've immediately imported all of the sections we'll be using throughout our application but as you can see these sections are just empty components nothing is in there right now it is completely empty and you're going to code the entirety of all these sections and components on your own of course with my help by watching this video great so as you saw we have app with three files we have the components which all of them are entirely empty we have the constants folder in here I prepared for you some content we'll be using from our design that way you don't have to necessarily copy and paste every single thing I have created constants that we can simply reuse in our code and you can look at this constant and learn something from it as well this is how you would structure applications in the real world as well extract the data from the code then we're moving into the pages folder this folder is no longer being used in next 13 so we won't need it at all finally we have the public where we have some assets from the design and we have some sections right here as well which we already explored all of them are empty with that said we also have the Styles so if you look at the globals.css files in here I extracted some of the styles from the design most different gradients that we'll be using but that's about it we're also using Tailwind importing it right here and finally we've created an index.js file inside these Styles where we extracted most commonly used Styles so if you're using this specific padding all across your application you don't want to retype this all across the board you can simply call it paddings and that way you add this class name and it's going to apply all of the class names right here the same thing goes for the hero heading as you can see that's about it for the Styles and finally we also have the utils as you know we'll be using framer motion for this project so in here we prepared some of the most common variants of animations we'll be using for example there's a special function for slide in we also have the Stagger container different variants for text and so on while using these in the code we're going to revisit this motion and then explain all of the code that is in this file great with that said we can close all of the open files in the starter repo and you can see that that is about it that is our entire structure and as I've mentioned we are using next 13 right now in the experimental stage we can also see that if we check out the package.json next 13.0.3 also react 18 and framer motion but as you can see we have no extra dependencies besides that the absolute entirety of the application will be coded by you without any extra dependencies isn't that great now that we know the structure of our next 13 application we are ready to start developing it we can go inside of the app and then inside of the page right here you can notice that we're of course going to start with the nav bar before we Dive Right In it is important to mention that there is also ahead which is a simple head component allowing you to change the title of your website and also add a link to the favicon but inside the layout we can also add some additional things so in here for example we're adding a special font that is going to make your application entirely different of course this is the font straight from the design great now we can dive into page and we can actually run our application to do that we can open up our terminal by going to view and then terminal and then we can run npm install make sure that you are in the root of your directory this is going to install the node modules for all of the packages but as we said we don't have many it's just react next and frame or motion so these should install pretty quickly and finally we can run npm run Dev to run our application on localhost 3000 you can control click the localhost 3000 and immediately it's going to open up in your browser I think that now you can see what I meant when I said that you're gonna get an empty slate you have nothing here it is just a simple layout but we of course on our own have to code every single part of this application with that said let's put our browser side by side with our editor let's do it somewhere like this and then we can collapse our editor as well we can close our terminal collapse our sides and we can control click into the nav bar to start developing it immediately by diving into our navbar component we can see something that's quite new and unusual a string that says use client at Line 1 over file what is that well if we look into next 13 beta docs we can render the server and client components part and if we scroll right here we can see that all components inside of the app directory are react server components by default this allows you to automatically adopt server components with no extra work and Achieve great performance right out of the box this means that we no longer have to write that const get server side props and similar it's going to work right out of the box and in here they dive into explaining why this is beneficial and trust me it is the apps are much better much faster cachable and more predictable in size but sometimes you won't be able to use those components because we have to use what's on the client side we have to use react use State Hooks and so much more so in here they give us a convention on how to transform the server side component to a client-side component simply create a file and add a use client directive at the top of the file then we can use all regular react client-side functionalities such as use State hooks as you can see right here you only need to Mark components as use client when they use client hooks such as use state or use effect usually it's best to leave components that do not depend on client hooks without the directive so that they can automatically be rendered as a server component when they aren't imported by another client component this helps ensure the smallest amount of client-side JavaScript great with that said we can right here import motion from framer motion you're going to notice in some of these files we don't necessarily use use state or use effect hooks but some of the dependencies we are using use them and therefore we also have to add use client at the top great with that said we can also import our styles by saying import styles from dot slash Styles if we control click into this you're gonna see that this is an object containing strings that we can more easily use now if we go back to our nav bar we can also import something known as nav variants coming from utils forward slash motion we can also immediately control click to check it out so by working on the nav bar we are immediately diving into frameware motion and this right here is called a variant and it shows you how you can modify the animation so there's going to be some properties while the animation is hidden and then when it is showing on hidden we want to have the opacity of 0 and we want to have it moved by minus 50 pixels but when it is showing we want to have it to 1 and then position it at 0 pixels transition is going to be of a type spring which means that it's going to bounce a bit we have the stiffness and the damping of the spring as well so finally let's go back to the nav bar and let's make use of all of those Imports immediately our rapid div for the nav bar is going to be motion dot nav by importing motion from framework motion you'll get access to this special variable or special element that you can use motion that something it can be a nav or it can be a div essentially you're going to create that element and then you can pass special props to it first of all the most important prop is the variance prop so we can say variance and that's going to be equal to nav variance you can call them in line meaning if we didn't create this special variable you would simply create an object and then you could use it right here but as you can see this can get messy pretty quickly as we have about 30 lines and we haven't yet created anything in the code so I prefer to keep these in a special file right here under util's motion we divide some kind of logic for animations from the actual presentation then initial state of this div is going to be hidden while in view we want to set it to a string of show and finally we're going to give it a class name now this is going to be a template string where we want to render these Styles dot X paddings padding y or p8-8 and then relative now you might notice a couple of different things right here first of all we are using the Styles variable or Styles object there as I mentioned a couple of times so far we created some often used Styles so X paddings is simply going to provide px6 and then on small devices bx16 but now if you're really confused about this PX py and so on these all are class names created by Tailwind so as you can see this class name of py8 Simply gives you padding top 2 and padding bottom two if you haven't used Tailwind before no worries at all Tailwind is a utility first CSS framework packed with utility classes such as Flex bt4 deck Center and so on essentially you don't have to create special style sheets you just write CSS as classes right on your elements this makes it so much easier to create CSS layouts so if you're wondering what any of these class names mean simply go to Tailwind CSS docs and then search for that class in this case we can search for py and immediately you can see that this is for adding vertical padding so throughout this entire video if you see a class name that sounds unfamiliar to you simply go to Tailwind CSS docs go to search and then type it right here and it's going to give you a great explanation great now let's go back to building our application if we now reload our application you should already be able to see that the navbar Scrolls or appears from the top let's check that one more time there we go so we're using the nav variant where it's coming from -50 pixels meaning from the top and it's sliding all the way to the bottom great now inside of there let's create another div this div is going to be a self-closing Dev it's going to have a class name equal to Absolute it's going to have a w dash 50 percent that stands for width it's going to have an inset property of zero and a gradient Dash zero one class name now you can already see a light gradient appear right there but it's not that visible because we haven't changed the background color of our background to do just that we can go back to page and right here we can add a class name to this div we can say class name is equal to BG Dash primary Dash black and overflow Dash hidden if we save this now everything is going to become dark and now this light gradient is more apparent below this self-closing div we're gonna have another div this div is going to have a class name equal to is going to be template string so let's do it like this inside of there we're going to have styles dot inner width and we're going to also have mx-auto for margin X we're going to also have a flex property to make it a flex div and we're going to use justify between as well as Gap Dash 8. now inside of this div we want to render an image so let's create a self-closing image tag that's going to have a source equal to forward slash search dot SVG now if we save this you can see that we have a huge surge icon in our nav bar let's give it an ALT property that's going to say search and let's also give it a class name equal to W Dash inside the square brackets 24px h-24px and object Dash contain if we save this that's going to make it just a bit bigger but that's because we're on 400 Zoom so if we reset this this is going to seem a bit better below that image let's add an H2 tag that H2 is going to have a text of metaverses in there that H2 is also going to have a class name of font Dash extra bold text Dash 24px leading dash 30 pixels and text Dash White now if we save this you can see that appear on the right side and so far we haven't yet tapped into the design of our project we're just creating the nav bar but now that we're diving into different sections we have to see what are we building so let's open up the figma design file for our project the main promise of this video was to teach you how to take a figma design and turn it into a brilliant website and that's exactly what we're doing right now down in the description you can find the entire design file for this application as you can see this is the website we'll build I'm going to quickly bump this up so we can zoom it in even more there we go metaverse Madness it is a beautiful website built around the theme of virtual reality so we're gonna have a simple navigation bar we're gonna have a huge hero section and an image then we're are going to also have some text and then we'll be able to choose the world we want to explore as you can see here is the virtual reality icon and the point of this website is to allow users to explore different Virtual Worlds we also have some more information like a section that gives you some steps on how to use it more selling points a new world and more realistic a huge heading with this great Globe asset that we'll also use we have some blog posts about the platform we also have a review section right here or maybe a word by the founder section and finally the last call to action and a footer great now we can go all the way to the top and we can focus on creating this great nav bar and then diving into the hero section so now I'm going to put this on the side I'm going to zoom out a bit and hopefully we can still see it just a bit while we're developing it now if you're wondering about how to get specific styles for some elements you simply have to dive deep into that element for example I dived into this heading tag that we just wrote right here and then you have to go to inspect to be able to see some CSS properties that you can use so we can immediately see the font family the font style color and so much more great the same thing is going to go for this text as well this one is going to be a bit different and other text pieces as well but also images so right here you can download all images by going to export and then doing that right here but we prepared all of the assets for you so they're going to immediately be right inside of the public folder right here we have people zero people one and so on and we also have all of the planet images there we go that is looking great now we can close all of those images and we can go back to our navbar we created The Heading but now we also have to add this hamburger icon so right below our heading we can add a self-closing image tag and we're going to render a source called forward slash menu dot SVG given an ALT tag that's going to say menu and give it a class name that's going to say w-24 pixels that's for the width H-24 pixels that's for the height and then object Dash contain if we save that and go back to our site we can see a beautiful navigation bar of course when working with designs you're in most cases going to get just the desktop version and the mobile version in this case we have just the desktop one but you have to make your design adapt to all different sizes so right here we are on some sort of a weird size maybe a tablet size but still everything fits nicely in the view and with that said we are done with our nav bar so we can close it and we can dive into maybe the most important section of our entire application the hero section that's going to be this huge metaverse Madness text with this weird d as well as this huge image right here so let's go ahead and get started right now in most cases we're going to have similar Imports we'll have to import motion Styles and then some utils from motion as well so let's dive into the nav bar and let's simply copy all of the Imports we've used there and let's paste them inside of the hero jsx section in this case we won't need nav variants but we're going to use the slide in property the Stagger container property and the text variant property great our hero section is going to be just that a section that section is going to have a class name equal to it's going to be a template string of styles dot y paddings on small devices padding left of 16 and usually padding left of 6. now if we go back and save that you can see that that moved the hero section a bit more Inward and then we can create a motion div motion dot div you already learned that motion div accepts some properties mainly variance so right inside of here we can give it a stagger container variant we have to properly spell it in the import as well and we can see what that variant does you can see that it doesn't have any properties on hidden but on show it's going to call two sub transitions such as staggered children and delay children this makes her motion div a container div inside of which we can render children animations that is quite cool now initially it's going to be hidden so we can say hidden while in view we want to show it we can also set the viewport property it's going to have an object inside of it we're going to set once false and amount of 25. now I know that this might sound weird to you what are we talking about what kind of viewport once amount and so on so let me show you how you can learn about all of the libraries out there right now we're learning about framework motion but what if it's another Library what if it is a library for galleries calculators calendars or anything really you need to be able to read documentation so how would I do it I would go to google.com I would Google framer motion documentation search for it and then you're gonna see the first link that appears right here in the documentation we can try to look for examples simple examples for animation gestures components transforms and more and finally search for viewport immediately it's going to lead you to a scroll triggered animation section motion also provides a while in View Property that defines a visual state to animate to while a component is in the viewport so we can say viewport once and then it's going to animate so as you can see once we scroll through it it is going to become visible now you can set it to Once meaning that once we reach to it it's not going to animate again see the orange appeared and now if we move ahead it's always going to stay there but you can also change that to appear multiple times every time that you scroll through it that is another possibility so in here we set a viewport false amount 0.25 so in here we said we don't want it to render only once it's going to be rendered every time that it is in the viewport now this div is also going to have a class name equal to that's going to be a template string of styles dot inner width it's also going to have a margin X set to Auto it's going to be a flex container and it's going to be a flex column inside of there we're going to have one more div this div is going to have a class name equal to flex justify Dash center items Dash Center Flex Dash call relative and Z index of 10. to make it appear above our background inside of there we can render our motion dot H1 so this is our first time that we're animating an H1 property inside of there it can say metaverse we're going to give it a variant or very ends that's going to call a function called text variant 1.1 now we can control click it to go into that and you can see that we have a delay so we have created a special function text variant that's going to create a variant but we can also pass a delay to it so in this case we're setting the delay to be 1.1 second so now if we save it of course we're not going to see anything yet because we haven't provided the class names so let's do just that class name is equal to Styles dot hero heading if we save that we get a bit more space but we cannot really see anything here so let's continue with another motion div below our motion H1 that's going to be a motion.diff component it's going to have a variant again inside of the props of that element variance is going to be equal to text variant and we're going to pass in a delay of 1.2 seconds so it's going to render just a bit after this first initial H1 we can also give it a class name equal to flex Flex Dash row justify Dash Center and items Dash Center inside of there we want to render this madness thing so first we rendered metaverse and then we want to render the madness so inside of that motion div we can show an H1 a regular one this time that's going to have a class name equal to of styles dot hero heading and we can say m a so just the first two letters now we have the crazy D which can be a div and it's going to be a self-closing div tag with only one property a class name of styles dot hero D text like this we can of course control click to go into it and you can see the Styles we used to make this happen it's going to have some properties but mainly we're making this happen with the borders believe it or not so this right here is a div and with the ability of borders we're creating it into a d so on the left side it's not that complicated it is just a regular border on top and bottom it is also not that complicated but then on the right side we have to make it rounded again really really simple you just give it a rounded Dash R and then specific pixel property great finally below that we can duplicate the H1 and we're going to finish the word that's going to be Ness and if you reload the page the text is going to appear so right here we have metaverse Madness let's reload it one more time and notice how the first word appears first and then after 100 milliseconds the madness appears as well that is cool you can also notice the navigation bar flowing in great now below this motion Dev and below this regular div we can create another motion div this motion div is going to have a variance property equal to slide in then we can provide it a string slide in from right it's going to be a type of Animation called tween and also it's going to be 0.2 delay and then one second duration this is a special function we created we can go into it and you can see that this allows us to pass props to it but then based on those props we can immediately change the direction that we want to animate to or animate from we also pass different transitions such as type delay and duration so we can specify and make our animation unique just by calling a function right here and then passing different props this div is also going to have a class name equal to relative W Dash full on medium devices it's going to have a minus empty meaning negative margin top of 20 pixels and also negative margin top of 12 pixels when we're not on medium devices inside of this motion div we want to have a regular div and what we're doing of course is doing the image that's going to be shown below the text just so you know great this div is going to have a class name equal to Absolute W Dash full h-300 pixels hero Dash gradient rounded Dash top left Dash 140 pixels Z index of zero and then minus top minus 30 pixels so now we're positioning this absolutely placed div inside of there we want to render the image so let's go into this div let's render the self-closing image tag source is going to be set to cover.png alt is going to be set to cover and finally class name is going to be set to W Dash full on small devices height is going to be set to 500 pixels usually height is going to be set to 300 pixels it's going to have an object cover property it's also going to be rounded Dash TL Dash 140 pixels it's going to have a z index of 10 meaning it's going to show above other elements and it's going to be set to relative now if we save this and if we reload the page we can see the image slide in now I notice right here it's not supposed to say rounded Dash top Dash 140 pixels just rounded Dash t l as in top left there we go so now we get this beautiful curve and again notice the animation and the timings between those animations first we get the image and then we get the gradient the nav bar and then nicely and then finally the text beautiful now we also need this beautiful stamp button right here that you can see we can click it and then we're going to scroll down to the section below so to implement that we can go below our image still inside of the div and we can render an anchor tag this anchor is going to have an href equal to Hash Explorer that's going to be our next section inside of there we can render a Dev that div is going to have a class name equal to W Dash full Flex justify Dash end on small devices negative margin top meaning minus margin top Mt Dash 70 pixels of course inside of square brackets and then again on regular devices minus empty minus 50 pixels padding right is going to be set to 40 pixels it's going to be relative and it's going to have a z index of 10. finally inside of there we can render an image a self-closing tag that's going to have a source equal to forward slash stamp dot PNG it's going to have an ALT tag equal to stamp it's going to have a class name equal to on small devices W Dash 155 pixels usually width is going to be 100 pixels on small devices the height is going to be set to 155 pixels and usually the height is going to be 100 pixels and it's going to have a property of object contained now we have to close this class name and save it and if you reload the page you should be able to see it appear right here but we cannot see anything yet so let's try to debug it we're closing our section here our two motion divs and this div as well now this div right here should be a gradient div like the one we used in the nav bar remember this is a self-closing div because it's just going to render a blur meaning some light happening right there so if we go back to the hero section we need to automatically close this div as well and then we have to remove the closing div here if we save this you'll be able to see a nice gradient appear that is that self-closing div and now we're closing everything where we should so now we can see the stamp appear right here as well that is great now we have a beautiful navigation bar and a hero section let's expand it to its full Glory there we go this is looking great and we can click right here to scroll to the bottom section I'm going to collapse it once again and with that said we're completely done with the hero section it might look a bit empty right now but as you can see its main point is to guide you from this hero to the text below so going back we can close our hero and our motion and we can control click to go into the about section inside of here we can also import similar things as we have inside of the hero so let's just copy it and let's go back to about and let's paste it we're gonna need motion we're gonna also need a new component so we can say import typing text from dot slash components this is a component we are yet to create as you can see right now it is completely empty we're gonna also need some Styles and instead of slide in we're gonna import the fade in variation and the Stagger container that's coming from util's motion now this section is going to have have a class name equal to that's going to be a template string of styles dot paddings we're going to also have a relative and z-10 position inside of there we want to render a gradient so that's going to be a self-closing div that's going to have a class name equal to gradient 0 2 and then a z Dash zero as you can see it just added this light right here then we're going to render a motion dot div this div is going to have a variant so we have to add it inside of the property variance equal to stagger container initially so initial is going to be set to Hidden and then while in view we want to show it viewport is going to be same as before once set to false and then amount set to 0.25 finally it's going to have a class name equal to that's going to be a template string of styles dot inner width MX Dash Auto Styles dot Flex Center and finally Flex Dash call there we go so this is our wrapper div inside of there we want to render a typing text self-closing component we're going to pass two things to it we're going to pass the title that's going to be equal to one vertical line space about metaverses and then also text Styles is going to be set to text Center these are props through passing 2D typing text component right now it is a simple text property but let's go into it and let's implement the typing text component that's going to be this text right here so what we can do is we can make both of these components except two props the title and the text Styles then let's work wet D typing text first so that's going to be this one right here instead of a p it's going to be a motion dot P component it's going to have a variance as we always do with motions so variance is going to be set to text container now this is a variant of course coming from our utils so we can go back to the about and we can copy all of the Imports and paste them here now we won't need the typing text nor the Styles we simply need the text container utils and of course the motion so we can use the motion.p now this is going to animate but we still cannot see anything inside of here because we haven't yet returned anything so what we can do is we can also give it a class name make it a template literal string give it a font normal text Dash 14 pixels for the size we can also give it a text Dash secondary Dash white color and finally we can pass in the additional text Styles coming from props now inside of there it's not going to be just a self-closing one we can create an array so that's going to be array Dot from title this is going to split the characters in the title into an array and then we want to map over those letters we're going to get each letter as the first element of the map and then the index now for each one we want to instantly return a span element so instead of a curly brace here use a parenthesis for instant return and we want to return a motion.span now that motion span is also going to have a variant property so that's going to be variants of text variant 2 and the key is going to be equal to index now this text variant 2 is also coming from utils so we can just take it from here now we still cannot see anything and that's because we haven't yet rendered the actual letter so inside of the motion span we can check if letter is triple equal to an empty space then we want to render this set of ASCII characters and if not we can just render the letter now if you're wondering what these characters are let's simply Google it and you can see that this is a Unicode character for a no break space I think it's going to make more sense once you see it on the website and you can see it right here if we zoom in it's going to be about metaverses and there is that character it's just a bit smaller than the actual space great we copy that exactly from the design beautiful now we can go back and we can go to our about typing text component is done the next thing we have below the typing text is going to be another motion dot P that is for this huge block of text that you can see right here that motion that P is going to have variance set to fade in up also tween also 0.2 that's going to be for delay and then one for the duration we can also give it a class name equal to mt-8 pixels also font normal on small devices text Dash 32 pixels text Dash 20 pixels text Dash Center to center it and text Dash secondary Dash white for the color finally inside of there we can render a couple of different spans to show this text as you can see there's a couple of bolded elements so for these bolded elements we can render them inside of a span so let's first copy the entire text by right clicking it and then clicking copy we can paste it right here and now let's separate the things that are bolded you can see right here metaverse is bolded so we're going to put it in a new line then we have Madness of the metaverse let's also put that in a new line there we go then we also have VR and finally explore so let's put VR in a new line and then the word explore we want to replicate this exactly as it is in the design now for these we want to wrap them in a span element and that span is going to have a class name equal to font Dash extra bold in text Dash White great I can put the word metaverse there and we can also duplicate this span and replace it right here The Madness of the metaverse so we can put it inside of here we can duplicate it one more time and we can use it for VR this time so let's wrap it in a span as well let's do it properly of course and finally the word explore so we can copy it and we can paste it right here now if we save this and go back you can see our text appears right there but you're going to notice that we're missing spaces in between those extra bolded letters so what we can do is we can now bring everything in one line so metaverse is and then you can provide this space right here if it is in one line then the space will be added if it is in a new line then the editor is going to cut it out so let's simply put everything in one line and provide the spaces as you would normally there we go we can keep repeating that until we have everything in one line with appropriate spaces there we go and there's one more left perfect here is the text now if we Zoom it out we can see about metaverses metaverse is a new thing in the future where you can enjoy the virtual world this text is looking great and now if we click right here we cannot yet scroll but we're going to implement that really really soon great with that said we also have the image on the design right here and that image is going to be the arrow to scroll down so going back below this P tag we're going to render a motion dot IMG it's going to have variance as we always do that's going to be fade in up and then tween is going to be 0.3 this time and then 1. 0.3 just to make it a bit different from the 0.2 for the text that way it's going to appear that it's rendering after the text we can also give it a source equal to Arrow Dash down DOT SVG an ALT tag equal to arrow down and finally a class name equal to W Dash 18 pixels h-28 pixels object Dash contain and margin top of 28 pixels to divide from the text above it is a self-closing image tag and we can remove this about section text now if we save that and reload the page you can see this great arrow appears and if you look really closely you can see that it animates up great that's going to be it for our about section but now can we really scroll from here to there it looks like we can let's expand it to the full window there we go metaverse Madness let's reload the page once and let's click this button and it doesn't appear to scroll down which is not good we can look into that later on once we focus on other Scrolls on the website now we can close the about and the custom text and we can look into our page structure there was one workaround that I had to do to make the gradients work you're gonna notice that across this page we have a lot of different gradients one at the top left then we have one right here we also have one right here so to be able to add all of those gradients that make our page look great we have to separate our layout by using some divs So Below the hero we're going to add a div and that div is going to have a class name equal to relative inside of there we can put the about and the explore sections like this and between them we're going to add a div a self-closing div with a class name equal to gradient Dash zero three and the Z index is going to be zero now if we save this and go back you can see that the gradient changes a bit but we cannot yet see all the difference finally we're going to repeat this process for a few other sections as well to be able to add all the gradients we're going to copy this div wrap the get started and what's new with that div as well and in between those we can duplicate this div for the gradient but this time it's going to be gradient 0 4. and we can repeat this process one more time for the insights and the feedback right here we started before the insides we ended after the feedback and then we add a gradient in between them that's going to be gradient 0 4 the same one that we had above now we cannot yet see all the gradients because these sections are so close together but once we start implementing the sections and giving them height we'll start seeing all of those gradients that are on the page great with that said we can dive into our next section which is the explore and the explore in my opinion is going to be the most interesting of them all because we're going to dive into this interesting layout we'll be able to hover over these different images and they're going to expand to show us the worlds which we can go into using a VR headset we're going to play with animations animate these staggered meaning they're going to animate one by one and do a lot of cool stuff so let's collapse this and let's dive into the explore section right away to get started with our explore page we can again copy some of the imports from previous pages so let's copy them from the about and let's paste them right here in the Explorer we'll need to import motion from frame or motion but we're gonna also import for the first time in this app use State coming from react alongside the typing text component we're gonna also need a couple of other components that's going to be explore card as well as title text and that's coming from components we're also importing Styles and then from utils we only need the Stagger container property finally we also need the data for these worlds right here the names and images so we can import right here at the bottom explore worlds and that's coming from constants remember when I told you I prepared some content from the design well it's just this it's a series of objects having IDs image URLs and titles corresponding to these different images right here great so let's start by coding this part we can go back to explore and now that we have all the Imports we can first style our section we can give it a class name make it into a template string and say Styles dot paddings also give it an ID of explore now this is going to allow us to scroll by using this button so if you click it Scrolls nicely perfect now we can also create a motion div inside of it so motion dot div and we want to give it some variance in this case variants are going to be stire container because we're going to have many more animations within it initially we want to have it as hidden then while in view we want to set it to show again for the viewport we're going to do the same thing that's going to be once is set to false and also amount is 0.25 finally the class name is going to be a template string of styles dot inner width MX Auto and finally flex and flex column great inside of there we can render this small heading the world so let's do just that by rendering the typing text component that's the component we have already developed right here so the only thing we have to do is simply pass the title which is going to be one straight line the world and then also the text styles which is going to be equal to Simply string off text Dash center now if we save this you can see that once we scroll down we have the world and you can see how it nicely animates in then below that we can also render the title text this is going to be a self-closing component and we also are going to pass in the title which is this time going to be a empty react fragment that has the choose the world you want inside of it we can see that from the design choose the world you want but then we want to have a break tag and then to explore so we can simply render a br tag right here after the want that BR tag is going to have a class name equal to MD block meaning visible on medium devices but hidden usually great and then finally we can say to explore after the Break Tag now we cannot see anything yet because we haven't yet developed the title text component so let's simply pass the text Styles equal to text Dash Center and now we are ready to dive into the title text component and develop it the title text is nothing more than a motion dot H2 so it's animated title and it's going to have a variance equal to text variant 2. initially it's going to be set to Hidden while in view is going to be set to show and then finally the class name is going to be a template string where we give it a margin top to divide it from the text above of 8 pixels we give it a font Dash bold it is a title after all on medium devices the text is going to be 64 pixels and then usually the text is going to be a bit smaller of 40 pixels the color is going to be white and we also want to pass all of the text styles that we send through the props right here inside of there we're going to render the title now if we save it we can see choose the world you want to explore this is looking great let's expand it just a bit there we go and now if we reload the page and click this sticker right here it's going to point us to the choose the world you want to explore great now we are ready to add these cool images and make them clickable So Below the title text we can create a div that Dev is going to have a class name equal to Mt 50 pixels to divide it a bit from the top it's going to be Flex on large devices we want to make it into a flex row and usually Flex column we want to give it a minimum height so Min Dash H dash of 70 VH 70 view height and then we want to give it a gap of 5. inside of there we want to map over our explore worlds so explore worlds.map we get each individual world and the index of that world and we want to instantly return a new component that's going to be a component we have it yet created the explore card self-closing component to each one we want to pass the key equal to the world dot ID we then want to spread all of the props of the world so that's going to be da da da world right here we also want to pass it an index an active property which is going to come from the state which we haven't yet created and then the handle click property which is going to set the active state so now as you can see everything is right besides the active and set active so we can add those to the state above right here my eslength transform this into an instantly returned function but we want to have a regular return right here so let me just quickly fix that and then we can add a use State here so I'm going to say use State snippet active set active and that's going to be world dash 2. as you can see on the design the second world is expanded initially and now if we go down we can see our worlds or rather we can see one two three four five explore cards now we can dive into the explore card component and develop it from scratch this one as you can imagine is going to be a bit tougher because we're messing with a lot of different animations and we're expanding the actual cards on click so this is an interesting part and let's Dive Right In to develop our explore card we can again go back to pages and to our nav bar because from here we can copy all of the Imports to save us some time going back to explore card we can paste them and as you can see we're importing motion from framework motion or importing the Styles and also we're gonna import the fade in motion with that said we already know that our explore card is accepting some props it's going to accept the key the index active value handle click but also all of the properties that the world has so these properties are going to be ID image URL and title so we can go back to explore card and we can get those props right here that's going to be ID imgurl title index active and handle click now we're going to wrap this in a motion dot div and we're going to give it some variance so we can say variance is equal to and we're going to call in the fade invariant we want to fade in from right it's going to be a spring type animation and we want to animate these one by one so if we put a static animation or static delay then they're going to all animate at the same time but if we take the index and then multiply it by 0.5 seconds then the first one is going to happen in 0.5 seconds the second one in one second the third one in one and a half second and so on so they're going to show one by one and we can also add the duration of 1.75 great now we need to add a class name so let's say class name is equal to it's going to be a template string it's going to be relative but now we need to check whether it is active so we can add a dynamic template string and say if active is equal to the current ID then we're going to give it LG property Flex is 3.5 meaning it's going to take three and a half times as much as it is when it's not opened we also want to give it a flex of 10. if it's not active then on large devices we simply want to give it a flex of 0.5 and a flex Dash 2 usually great now we can keep adding additional properties so we can go right here outside of this variable and that's going to be Flex items Dash Center justify Dash Center Min Dash W Dash 170 pixels for the width h-700 pixels for the height transition Dash Flex like this duration Dash 0.7 seconds ease out Flex and cursor Dash pointer now if we save this and reload the page we can see that they slowly animate in but it's hard to see because it's just dark text so let's implement the inside of the card by adding an image right here we can create a self-closing image tag that's going to have a source equal to IMG URL which we're getting from props it's going to be different for every image let's give it an ALT tag equal to title and let's also give it a class name equal to Absolute W Dash fool H dash full object Dash cover and rounded Dash 24 pixels now if we save this you can see those images appear right there and now check this out if we reload the page you can notice how they slowly animate in one after the other of course now we don't yet know which one is active so we have to make that work so what we can do is below the image we can check if active is not triple equal to ID in that case we can render the following we're going to render an H3 and this H3 is going to contain a title so now if we save this we cannot see it yet because we have to add some classes so let's add a class name equal to font semi bold on small devices text Dash 26 pixels text Dash 18 pixels usually text Dash white absolute z-0 LG bottom Dash 20 to position it from the bottom LG rotate Dash minus 90 degrees and LG origin Dash 0 comma zero now if we save this you can see the text appear on the bottom it is positioned like this we had to rotate it but this is only for the ones that are currently not active and as you can see the second one has been selected as the active one so we have to make that work as well so that's going to be the second part of our Clause right here so instead of and and we can put the question mark to open up Eternal expression and then have the second part right here in this case we're going to render a div that div is going to have one more div inside of it and then inside of that div we can render an image this image is going to have a source equal to that's going to be forward slash headset dot SVG it's going to have an ALT tag equal to headset and it's going to have a class name equal to W dash one over two h-1 over 2 and object Dash contain now if we save this you should be able to see that headset but we cannot see it yet because it's behind the image we have to add these styles for these divs above so let's do that first we're going to give this above div a class name equal to Absolute bottom Dash zero p-8 and as soon as we do that you can notice the headset appear right here but it's too small so let's continue adding class names let's also give it justify Dash start W Dash full Flex Dash call and BG Dash rgba zero zero zero which is complete Black and then 0.5 finally we need to close it and we can say rounded Dash B-24 pixels to round it up now if we save this you can notice it gets much bigger and we get this background right here which makes things much more visible because as you can see the text right here is not that visible because we don't have that line finally we can style the inner div by giving it a class name equal to a template string of styles dot Flex Center we can also give it a w-60 pixel h-60 pixel for the height rounded Dash 24 pixels glass morphism margin bottom 16 pixels if we save this now we have this nice rounded circle around our icon finally let's add some text below this div containing an image we're going to add a P tag this P tag is going to say enter the metaverse and of course we have to style it a bit by giving it a class name equal to font Dash normal text Dash 16 pixels leading Dash 20 pixels text Dash white and uppercase there we go and through the metaverse but we also need a title the name of that playground we can see it for these ones but we cannot see it for the second one so let's add an H2 that H2 is going to render the title and we can give it a class name equal to mt-24 pixels to divide it a bit from the rest font semi-bold on small devices text is going to be 32 pixels large usually it's going to be 24 pixels large and it's going to be text Dash white now if we save this the second one is currently clicked and the other ones are not now if you expand it you're also going to notice that this one takes more space this is due to the flex properties that we used this one takes three and a half much space as the other ones so this is great but of course we cannot yet click them because we didn't implement the functionality so we can collapse this one more time and you can see that it also nicely scales on mobile devices finally on our initial div we can add an on click property that's going to be just below the class name the only thing we have to do is say on click hold the Callback function and call the handle click and pass in the ID of the area you want to select so now if you click right here you can see that it changes this is looking great so now if we expand it into its full Glory scroll to the top and reload the page we can notice this great animation coming in and slowly as we move down things animate as well so we have our text right there and then check this out they animate as you scroll maybe I scrolled a bit too slowly but you get the point if we now reload the page here you can see how they slowly animate in and you can also choose which one do you want to select and then it expands isn't this great this is my favorite part of the application great with that said we are done with the explore card component and with that we're also done with the Explorer section so we can go back to page and we can open up the next one which is the get started section let's quickly check the design to see what do we have to implement and let's expand it as you can see this is just how to get started with the app we're going to have this huge illustration on the left side and then some title and a few steps on the right side with that said let's collapse this and let's get started to get started with the get started page we can go back to pages and then to explore there we can take a couple of imports and then utilize them on the get started page as well in this case we won't be needing the use state but we will need motion we will need Styles we will need stagger container as well as fade in and finally Planet variants and regarding components we're gonna need the start steps title text and typing text and finally from constants we're gonna get the starting features great with that said we can add a class name to our section that's going to be a template string of styles dot paddings as well as relative and Z index of 10. inside of that section we're going to have a div that div is going to be a motion div so we can say motion.div and you know what we need we need a variance this div is going to be a container so we can give it a stagger container variant initially it's going to be set to Hidden usually or rather while in view it's going to be set to show viewport is going to be set to once false and also amount 0.25 finally the class name is going to be a template string of styles.inner width mx-auto for margin Flex on large devices Flex Dash row usually Flex Dash call and we're going to have a gap of 8. inside of there we're going to have one more motion div so let's create it motion dot div to that div we're going to give a variance equal to and that's going to be Planet variance so like this planet variance but we call it as a function and provide the left so now if we go into it you can notice that we have direction do we want to go left or do we want to go right so if we look at the final design in here we want to scroll this from the left but for the next section we're going to scroll it from the right hopefully that makes sense we can also give it a class name equal to template string of flex dash 1 and styles.flex Center finally inside of there we can render the image that's going to be a self-closing image tag with a source forward slash get started dot PNG also alt is going to be get started and the class name is going to be w-90 percent h-90 percent and finally object Dash contain now if we save this and scroll down you can see how nicely this planet flew in let's see that one more time by reloading the page oh we missed it there we go we saw it there at the bottom perfect and now let's add the text so below this motion div containing the image we're gonna have one more motion div but this time for the text so let's give it a variance equal to a string a function call of fade in from left of a type tween 0.2 seconds delay and then one second duration we can also give it a class name equal to flex-0.75 meaning it's going to take 0.75 percent of the space of the entire width of the screen image is going to take a bit more Flex justify Dash Center and flex Dash call inside of there we can render the components we have used so far that's going to be the typing text we can give it a title equal to how metaverses works there we go and we can self-close that we can then create a title text another self-closing component we have used before and we can also give it a title that's going to have a component inside of there that's going to be a react fragment saying get started with just a few clicks if we save that and reload the page we can see the text right here finally below that we can render one more div that div is going to have a class name of mt-31 pixel to divide it a bit from the top Flex Flex Dash call max-w-370 pixels for the width gap-24 pixels for the spacing and inside of there we can map over our starting features so we can say starting features that map we get each individual feature and the index of that feature and for each one we want to instantly return these start steps component to that start steps component we're going to pass in the key equal to feature below the key we're going to have a number and number is going to be index plus one and finally the text is also going to be a feature now you can see that we have three start steps and those starting features look like this find a world that suits you and you want to enter and these are mainly taken from the design as you can see right here one two three enter the world no need to beat so these are the starting steps now we can go into the starting steps component and we can code it out we're going to have a div and we accept some props we accept a number as well as a text that we just passed we also need to import these Styles coming from styles let's give it a class name equal to a template string of styles.flex Center and flex Dash row we're going to have one more div inside of it this div is going to have a class name equal to that's going to be a template string of styles.flex Center one more time but also w-70 pixels for the width h-70 pixels for the height rounded Dash 24 pixels and BG Dash hash 323 f5d that's that grayish color finally inside of there we can render a P tag and there we can put the number now if we save this you can see one two three but let's color those numbers out that's going to be a class name equal to font bold text Dash 20 pixels and text Dash White if we save that this is looking better but on the design we have 0 1 0 2 and 0 3 in this case we can just add that 0 before the number there we go finally let's render the text as well that's going to be below this div another P tag where we can render the text and it's going to have a class name equal to flex dash one margin left or ml-30 pixels font Dash normal text Dash 18 pixels and text Dash hash b0b0b0 which is a special color and leading Dash 32 pixels if we save that we can see our text appear right here and you can see on tablets we have the planet and then the text right there but let's now expand this to check it out in its full Glory there we go this is looking much better we have our sections and then we have get started with just a few clicks this is great now let's collapse it right here and let's close the start steps as well as the get started because we're done with that section the next section on our list is going to be what's new and these sections are quite similar as you can see right here get started has the planet on the left while the what's new has the planet on the right so to code it again let's simply get the imports from the get started copied up and then paste them in the what's new file we will need motion from framer motion Styles instead of starting features we're gonna need new features then we're gonna need a new features component title text and typing text and finally we're gonna need Planet variants fade in and style your container so this is great now the div and the section wrapping this part is also the same as in the get started so we can simply copy this section and the entire motion div as a matter of fact we can copy the entire get started part but we're gonna do a couple of small adjustments so simply copy everything from start of the section to the end of the section of the get started page and paste it into what's new immediately we can comment out these starting features because we no longer have them we now only have the new features so comment this div out and let's start from the top inside of here the planet should be on the right side and we have our motion div with the image right here at the start so simply copy it or cut it and put it below this motion div right here first we have the text and then we have this we have the image so now if we save that and go back you can see that something looks quite a bit off but no worries there that's because we're going to change this to Planet variance to right because we want the planet to appear from the right and it's not going to be get started at PNG it's going to be what's Dash new DOT BNG now if you reload the page you can see the planet jumps from the right and on the left we have the text but of course we have to change that text just a bit right now so in this motion div we're going to fade in from the right the typing text is going to say what's new and in here we can say what's new about metaverses there we go so that changed and finally for this div as we said we no longer have the starting features but now we have the new features that we want to map over but for that we're going to use a new features component not the one we used before so in this case we simply need to pass a key equal to feature dot title and then instead of passing the number in the text we can simply spread out the entire feature like this we don't even need the index in this case for The Styling wrapping that new component we're going to use Mt that's going to be 48 pixels Flex we're going to also use flex Dash wrap we won't need the flex Call and Max W so we can remove that but we will need Justified Dash between great now if we save this you can see two new features which took the layout of how it should be one two so now we can go into the new features component and we can implement it we can first import the styles from the top by saying import styles from dot slash styles we can also get from the props the image URL the title and the subtitle there we can give this div a class name of flex-1 flex Flex Dash column on small devices max-w-250 pixels and min-w-210 pixels if we save this it's just going to change the layout a bit but now we want to have one more inner div and that div is going to have a class name equal to it's going to be a template string of styles.flex Center w-70 pixels h-70 pixels rounded Dash 24 pixels BG Dash hash 323 f5d a similar grayish color and finally we can render an image inside of there that image is going to have a source equal to IMG URL the alt tag equal to Icon and also the class name equal to W dash one over two h-1 over 2 and object Dash contain if we save this we can see those two beautiful icons and below that we can render an H1 that H1 is going to say title and then we can render the title right here and below that we can write a repeat tag that's going to render the subtitle like this so if we save this we can see a lot of text right now but of course we have to style it so the H1 is going to have the margin top of 26 pixels to divide it from the top it's going to have a font Dash bold as well as text-24 for the size of the text it's also going to have a leading-30 pixel property finally the text is going to be white okay this is already a bit better and finally let's change the P tag to give it a class name equal to flex-1 margin top 16 pixels to divide it from the top font normal text Dash 18 pixels text Dash hash b0b0b0 and leading-32 pixels now if we save this it's still not going to look good and that's because this div was only supposed to wrap this image and not the H2 and the P tag as well so let's close this div properly right here after the image if we do that this is looking better but still not looking good in here I was supposed to put the hash instead of a dollar sign so let's fix that that's better but still these should appear one next to another so if we grow this a bit more there we go this is looking so much better and notice how everything is centered around the center of the page the beginner mistake that designers and developers make is they extend the content all the way to the edges of the screen but that is not needed it's much easier to read and see what's happening if you leave some padding on the right side so now we can see all the great animations and this is looking great perfect with that said believe it or not the new features section is also done so now we can expand this and we can close the new features and what's new and we can dive into the world the world section is going to look like this we're going to have a title track friends around you and invite them to play together in the same world and then we have this great illustration so let's focus on that right away to start with the world section let's again use some imports from the last page we have implemented which is the what's new we can copy these Imports and then and paste them right inside of Top of the World so we're gonna need the motion we're gonna need Styles we will need Title text and typing text from components and we're going to need the Stagger container and the fade in we won't need Planet variants right here and we don't need anything from the constants great now the initial section and the motion div are also the same as from the last section so we can dive into what's new and we can just copy the starting section and the starting motion div so right here in the world we can just paste the section and the motion div and then we can add the closing tag as well inside of here we want to immediately show the typing text people on the world so we can copy that create a typing text component it's a self-closing one give it a title equal to people on the world whatever that means and then we can also give it these Styles text Styles equal to text Dash Center if we save that and go back we can see people on the world we can also add a title text below that is also a self-causing component it's going to have a title property but this time it's going to be a component that's going to render a react fragment and then inside of there we can copy the text from here that's going to be track friends around so simply right click and then click copy there we go we can also give it a text stylus property equal to text Dash Center now if we save this and go back we can see that this is centered but this right here isn't so looking at this we have the section paddings relative Z10 stagger container MX Auto we have flex and in this case we don't need Flex row on large devices we can always leave it to column and we can also delete the gap-8 once we save this you can see people on the World shows up on top great now we can continue below the title text and there we can create another motion div so motion dot div let's also give it a variant variant is going to be a function of fade in to which we're going to pass in the fade in up tween 0.3 and then 1. and also we're going to give it a class name equal to relative mt-68 pixels Flex W Dash full and h-550 pixels in between that div we want to render that huge map so we can say IMG we can give it a source equal to forward slash map dot PNG also alt is going to be map and we can give it a class name equal to W Dash full H dash full and object Dash cover if we save this a huge map appears but as you can see we're going to do something interesting we're going to show these elements and make them appear on top of the map so let's do that right away below this image we're going to have a div and that div is going to be positioned absolutely so we can say class name position absolute bottom 20. write 20 w-70 pixels h-70 pixels p-6 pixels for the padding rounded Dash full and BG Dash 5d6680 like this now inside of there we have to add an image so that's going to be a self-closing image tag with a source equal to people-01.png all tag is also going to say people like this and finally the class name is going to be W-4 and h-4 if we save this we can see our person appear on the bottom right we have a little Australian dude now we can essentially copy this entire div with the image inside of it and we can paste it two more times one and then two let's see what do we have to change uh to make these different first of all it's going to be absolute but this time it's going to be top dash 10 and also left Dash 20 width height and P are going to remain the same rounded is the same and background color is the same but it's going to be people zero two so if we save this now we get a second person finally we want to add one more person this one is going to be top one over two and then left 45 percent everything else can remain the same but it's going to be people 0 3. let's save it and there we go we have our third person as well if you want to you can add those cards as well that would definitely be a nice addition I purposely left this for you as an extra front-end challenge so that you don't simply copy everything I'm doing go to the design get these assets export them right here and then try figuring out how you can also display them on the map with that said if we now go back you can see that our map is fully completed if we expand it it also nicely scales and there we go perfect let's collapse it back there close the world and jump into the insights section this section looks like this it is essentially a blog post section where we have links to these different articles insights about the metaverse to start developing our inside section we can again copy the imports from what's new so let's get in there copy all the Imports and make her life easy by simply pasting them right here we're going to need motion Styles stagger container we won't need fade in and Planet variants though we will need a new component called inside card title text typing text and then from constants we're gonna need to get insights there we go and again the initial div is going to be the same as in the previous section as in the world section so we can simply copy this section and the start of the motion div and we can paste it right here of course we have to close the motion div as well and then inside of there we can render the typing text we can give it a title equal to let's go back to the design let's copy the title which is going to be insight let's give it a text style sprot equal to text Dash Center and let's also create a title text component give it a title equal to that's going to be inside about metaverse and let's also give it a text styles of text Center you can see how we made everything reusable which is great now if we go back we can see our insight about metaverse but we cannot see our typing text for some reason let's reload the page scroll all the way down and there we go we can see it but we have to add that vertical line now below that we're going to have a div and this div is going to have a class name equal to mt-50 pixels so divide it from the top Flex Flex Dash call and GAP dash 30 pixels inside of there we want to map over our insights so we can say insights.map we get each individual Insight we also get the index of that insight and then we can render something out and that something is going to be the inside card self-closing component to it we can pass a key that's going to be equal to a template string of inside Dash and then we can render the index and we can also spread the entire inside finally we want to pass the index that's going to be equal to index Plus 1. great now we can dive into the inside card and that's going to be this card right here it contains the image on the left side the title description and then this button right here so to develop this inside card we can import motion coming from framer motion and we can import fade in coming from dot slash utils for slash motion this inside card accepts the IMG URL the title The subtitle and the index based on this we can create a motion dot div that's going to have a variant equal to fade in it's going to be up type of spring and then we're going to add index times 0.5 and then duration 1. again we are animating them one by one to make them appear like they're loading up we can also give it a class name equal to flex MD Flex Dash row meaning on medium devices like this usually Flex Dash column handcap-4 inside of there we want to render first the planet card so let's render the self-closing image source is going to be equal to IMG URL alt is going to be planet 0 1 and class name is going to be on medium devices width is 270 pixels not 300 but rather 200 W Dash full usually H is 250 pixels for the height rounded Dash 32 pixels and object dash cover now if we save this and go back we can see three great Planet images and if we reload the page it kept scrolling down so we couldn't really see it but they load one by one if you are initially scrolling to it you would be able to see the animation we're going to fix this really soon below this image we're going to have a div and that div is going to have a class name equal to W Dash full Flex justify Dash between and items Dash Center inside of that div we're going to have one more div that's going to have a class name equal to flex dash one on medium devices margin left 62 pixels Flex Flex Dash coal and then Max W Dash 650 pixels this is going to be for the inner div containing the title and the description finally we can render that title by adding the H4 right here and putting the title inside of it and below that we can render a P tag that's going to render the subtitle of course we can barely see them now so let's give them some Styles such as class name equal to font normal LG text Dash huge 42 pixels but usually text Dash 26 pixels and text secondary Dash White this is already much better no for title it should have been just text Dash white because this is our title and then for the P tag we can give it a class name equal to margin top 16 pixels to divide it from the top font normal on large devices text is going to be 20. pixels usually text is going to be 14 pixels and text is going to be secondary White if we save this now this is looking much closer to what do we have on the design finally we have to add this button on the right side so that's going to be below this div we can create one more div this div is going to contain that image image with a source equal to Arrow dot SVG alt is going to be arrow and then class name can be w-40 percent H dash 40 percent and finally object Dash contain if we save this we can see that little arrow there but we cannot see the circle around it so let's create it to this div we can give a class name equal to on large devices Flex usually hidden items Dash Center justify Dash Center width is going to be 100 pixels height is going to be 100 pixels as well rounded is going to be full BG Dash transparent border is going to be one pixel and border is going to be white if we save this we can see this huge button appear and that's going to be it for our inside card and with that also our entire insights so now if we expand this this is looking great insights about metaverse and you can see it matches the design completely perfect the next section on our list is going to be this great section that's the feedback section you can put some reviews here but also we have a word from the founder of metaverses so let's go back and collapse this notice how it nicely scales to tablet devices and we can go into the feedback section to start developing our feedback section let's first import motion coming from framer Dash motion let's also import Styles coming from dot slash Styles and finally we can import fade in stagger container as well as zoom in for the first time ever from utils forward slash motion in here we again have that same section that we used the last couple of times so we can go back to our insights section and we can copy the section as well as the first motion div that's wrapping it so inside of the feedback we can simply replace the opening section with the section and the motion div now we can close this div properly and let's look at the class names we have MX Auto flex but in this case we're going to also add on large devices Flex Dash row usually Flex Dash call and then finally we're going to add a gap of six inside of there we're going to create another motion div so right here motion dot div this motion div is going to have of course variance equal to fade in and that's going to be fade in from the right tween and 0.2 second is going to be delay and then one second is going to be duration of course we have to give it a class name as well just to remind you we're building this part right here let's give it some class names for example Flex Dash 0.5 this is going to make it take 50 of the screen on large devices max-w-370 pixels for width Flex justify Dash and flex Dash coal and gradient-05 on small devices the padding is going to be eight usually padding is going to be four it's going to be rounded Dash 32 pixels it's going to have a border of 1px and it's going to be border Dash and then the color is going to be hash 6A 6a6a and let's make it relative now inside of there we can put a feedback gradient div that's a self-closing div that's going to have a class name equal to feedback Dash gradient now if we save this right here we can see this great looking card and it's getting close to this div right here of course we're missing some content so let's add Samantha and let's add the founder of metaverses so right below this div we can add another div inside of which we're going to have an H4 inside of there we can say Samantha below that we can have a P tag and then inside of there we can say founder of metaverses of course we won't be able to see those yet we have to add some class names so for the H4 we can add a font bold on small devices text is going to be 32 pixels usually text is going to be 26 pixels on small devices leading is going to be set to 40 pixels and usually leading is going to be set to 36 pixels that is taken from the design and the text is going to be white now if we save this we can see this huge Samantha text let's also style our founder here class name is equal to margin top of 8 pixels font Dash normal on small devices text Dash 18 pixels usually text is 12 pixels on small devices leading is 22 pixels and usually leading is 16 pixels finally text Dash white if we save this we can now see this text right here but of course we are yet to add this long description so let's go ahead and copy it from here and below this div we're going to add another P tag inside of there we can paste what we copied let's also apply some class names as a matter of fact we can copy the class names from the top B tag and paste them right here now if we go back it's going to look almost good but let's change the margin top to 24 pixels to divide it a bit let's also change the small text to 24 to make it a bit bigger usually 18 leading is going to be 45 pixels and usually 39. if we save this it's going to look a bit better now of course we have to add the right side of this section so we can go outside of this motion div right here and inside of there we can create another motion dot div this motion div is going to have variance is equal to fade in from the left of type tween 0.2 seconds delay one second the ratio class name is relative flex-1 Flex justify Dash Center and items Dash Center to fully Center it we're working on this planet image finally inside of there we can render the image that's going to be a self-closing image tag that's going to have a source equal to forward slash Planet Dash zero nine dot PNG and we can also add the alt tag of planet09 class name is going to be W-4 and we can save it to check it out of course we first have to reload the page since we're working with animations and scroll all the way down there we go we can see our full size image but let's also on large devices give it a height of 610 pixels we cannot see the change yet because we're on the smaller device now usually h-auto Min Dash h-210 pixels and then object dash cover finally rounded Dash 40 pixels if we save that we're going to get those great Corners now we can expand this a bit more to see it side by side there we go this is much better and finally we have to add that stamp in between so to do that we can add one more motion div below this image motion dot div this one is going to have a variant or rather variants of zoom in 0.4 and then one let's give it a class name equal to or large devices it's going to be block meaning visible usually it's going to be hidden we also have to position it absolutely so we can position it on top of the image and on top of the review it's going to be positioned on minus left minus and then 10 percent and on top Dash three percent now if we save this we cannot see it because we haven't yet put the image inside of the div so if we add the image tag and give it a source equal to four slash stamp dot PNG and save it reload the page and there we go there's our huge stamp so what we can do is we can give it an ALT tag of stamp and then also we can give it a class name equal to W Dash 155 pixels and h-155 pixels finally object Dash contain if we now save this it's going to look much much better so now if we clear our URL reload the page and slow down we can see all of these animations happening this is looking great there we go and we have our final animation that we just saw this is looking great and with that we're done with the feedback section it looks great on tablet devices as well as on desktops now we can collapse this one more time and we can go to our final section of the page which is our footer let's see how our footer is going to look like if I expand this right here we can see that the footer contains this call to action button with the text and also line and then finally a regular simple footer so what we can do is collapse this and as always we can import a couple of things we can import motion coming from framer Dash motion we can also import socials coming from dot slash constants we can also import Styles coming from Styles and finally we can import footer variants coming from dot slash utils forward slash motion finally our footer is going to be a motion dot footer because we want to animate it and we're going to have some variants our variants are going to be footer variants we're going to give it the initial of hidden and while in view we want it to show finally we want to give it a class name equal to a template string of styles dot paddings to add left and right padding and padding y 8 on top and bottom as well as relative inside of this motion footer we can have a self-closing div that's going to have a class name equal to footer Dash gradient of course let's properly close it and then let's check it out if I save this you can see this gradient at the bottom right now now below that we can add the wrapper for the actual footer that's going to be a div that's going to have a class name equal to a template string of styles that inner width it's going to have a margin X of Auto Flex Flex Dash coal and gap-8 inside of that div we can have one more div and this div is going to have a class name equal to Flex items Dash Center justify Dash between Flex Dash wrap and GAP Dash 5. this is the container for this div right here containing the call to action button inside of there we can have an H4 the inside of H4 we can copy this text element right here and we can give it a class name inside of there we can say fun Dash bold on medium devices text is going to be 64 pixels and usually text is going to be 44 pixels and of course text white now we can see that huge enter the metaverse text of course below that we have to add a button so right below the H4 we can add a button element this button is going to be of a type is equal to button and it's going to have a class name equal to flex items Dash Center H dash fit padding y for padding X six BG Dash hash two five six one eight B and it's going to be rounded Dash 32 pixels and finally it's going to have a gap of 12 pixels there we go now inside of that button we're gonna have an image this is going to be self-closing image tag if we save this we can see this outline of a button but now if we add a source equal to forward slash headset dot SVG we can see that headset right here or I should have properly spelled that so that's going to be head set and there we go this is already looking better we can give it an ALT tag as well of headset and we can give it a class name equal to w-24 pixels for the width H-24 pixels for the height and object Dash contain there we go this is looking great and finally below that image we need a span element that's going to have a class name equal to font Dash normal text Dash 16 pixels and text Dash white that's going to say let's see it right here enter metaverse so let's copy that and let's go back and save it there we go this is looking great now we have to exit that button and exit this div right here and we're going to create another div now keep in mind this is one line but now we're focusing on what's below this line right here so if I expand this a bit you can see that the button is in the right side this is on the left side and now we can focus on what is below to do that we can wrap everything in a div that has a class name equal to flex and flex Dash call inside of there we can render that line that's going to be a self-closing div that's going to have a class name equal to margin bottom 50 pixels h-2 pixels BG Dash white and opacity Dash 10. if we fix this and save it you can see this line appear right there now below that we can focus on the last part which is the actual footer below this line we can create one more div that's going to serve as our footer it's going to have a class name equal to flex items Dash Center justify Dash between Flex Dash wrap and GAP Dash 4. inside of there we can render this text metaverses copyright and the icons so to do that let's first add an H4 there we go inside of there we can say metaverses and let's give it a class name equal to font Dash extra bold text Dash 24 pixels and text Dash White below that we can have a P tag that's going to have a class name equal to font Dash normal text Dash 14 pixels and text Dash white as well as opacity-50 there we can copy this text for the copyright let's go into it and paste it inside if we save this this is already looking better but we can also add those social icons So Below the P tag we can add a div give it a class name equal to flex and gap-4 and finally we can Loop over our social icons by calling socials that map we get each individual social and we can return an image for each one the key is going to be social.name source is going to be social.url alt is going to be social.name and finally the class name is going to be w-24 pixels for the width H-24 pixels for the hype object Dash contain and cursor Dash pointer if we save this the icons appear if you're wondering where did we get these icons from you can go into the socials and right here we have a URL and the name for each one of them great with that said our footer is done and with the footer we've actually came to the end of our entire page let's expand it and let's celebrate it in its full Glory one more time I'm gonna scroll to the top reload the page and let's scroll through it one more time to admire its full Glory we can see those animations animated as we scroll we can see those images and planets popping up we can select different ones to expand them and they slowly animate in the planets are also flowing in and then the text is also animating right here let's see that planet there we go it's flew in really nicely the text is appearing we can see this huge map right there with our people from all around the world and finally we have the insights about the metaverse let's call these blog posts then if I'm not mistaken we have references so right here we have a word from the founder and finally the footer is going to nicely animate in and this is the end of our entire build it is phenomenal it is a really beautiful application and we can even check the mobile version so if we go to inspect choose something like iPhone 12 Pro and scroll down you can see that everything is nicely animating even these images they show on top of each other we get the text we get planets everything is looking perfect this is a beautiful website that many companies would love to have as their company page especially the more modern web 3 related ones with that said there is one more step left to do and that is of course deployment to deploy our great project to the internet you can go to view and then terminal then you can press Ctrl C and then y to stop it from running and you can run the clear command finally since we're using next 13 there's a couple of things we'll have to do before exporting our code static export of our page is still not available from the app directory so we'll just have to move a couple of things from the app to the old and trusted Pages folder first of all let's delete the API folder inside of pages and inside of there we can create a new underscore app.js file down in the description of this video you can find a GitHub gist containing the code for the underscore app.js file you can copy it and then paste it right here essentially it is all that we already had in the head part of our application great now that we have the underscore app.js we also have to have the index.js so let's create the index.js inside of pages and for here let's go back to page.js and copy the entire page finally paste it right here in the index now that we implemented the underscore app and the index we can also go to the next dot config and we can switch app directory to false finally inside of the package.json we can add an additional command to the build script so we can say next build and end next export this is going to export the static files finally we can close all of our currently opened files we can go back to view and then terminal and we can run the command we just created npm Run build this command is going to create an optimized production build of replication so we can deploy it to the internet while the build is being created you can open up hostinger's dashboard by going to hpanel.hostinger.com inside of here you can see your premium shared hosting that you purchased at the start of the video so go ahead and click manage inside of here you can go to file manager it's going to open it up in a new tab and you'll see your public underscore HTML this is a new version of the file manager so in case something didn't work for you you can go back to the dashboard switch to the old dashboard on top right search for file and then click this file manager right here this one also has the public underscore HTML folder great with that said we can go back to the new file manager and we can collapse it as you can see the export was successful and the files have been written to the out folder so you can simply find it in your file Tree by looking for out and inside of here we have all of the assets static CSS and JS and one index.html inside of which our entire page is what you can do is right click it and then click reveal in File Explorer or finder if you're on Mac finally you can go inside of the public underscore HTML delete the PHP file if it's in there and then go inside of the out folder copy everything and simply drag and drop it right here this process is going to take less than a minute and our website is going to be there heck what a minute it was about five seconds and now that we have it we can go back to our hostingers dashboard you can then scroll down to Advanced and then SSL it looks like my SSL certificate has been automatically activated which means that I have https security if your hasn't been activated you can activate it here and if something doesn't work right you can always contact the support we can copy our URL from here and then paste it in our URL bar and in just a couple of seconds our website is live we can now slowly scroll through it to see all of the phenomenal animations you have created first we have the about section where we can read a bit more about metaverses then we can choose the world we want to explore and we can choose the worlds by clicking on them and then they're going to expand below that section we have this planet that just comes in and then we have another planet which rolls in in a really funny way then if we scroll down we have track friends all around the world which looks great insights about metaverse which is some sort of a blog or article section and then if we go down even further we can see our word from the founder and finally we have a footer this website is looking great congratulations on coming to the end of this video and for building it out if you like this video feel free to leave a like if the video reaches 20 000 likes we're recording more videos just like this one with that said don't forget to go to jsmaster3.pro and visit our Pro courses if you like this video you're going to love what's on there with that said it's been great having you for this entire video I wish you have a wonderful day and I'll see you in the next one [Music] thank you

Channel: JavaScript Mastery

Views: 206,714

Keywords: javascript, javascript mastery, js mastery, master javascript, modern ui ux, modern ui ux react, react js responsive website, react tailwind, react tailwind project, react tailwind css, tailwind css, tailwind css tutorial, tailwind css next js, landing page react, next 13, next 13 tutorial, next 13 app, next 13 layout, react js, nextjs tutorial, framer motion, framer motion tutorial, framer motion react, framer motion react tutorial, framer motion scroll animation

Id: ugCN_gynFYw

Length: 132min 3sec (7923 seconds)

Published: Fri Nov 25 2022