Transcript for:
Creating an Engaging Landing Page

imagine building a landing page so captivating that it stops users in their tracks grabs them by the eyeballs and demands their attention a site where every interaction comes alive with pure magic in this video you won't just be building a landing page you're going to be crafting a digital Masterpiece that combines Cutting Edge technology with breathtaking design on this page every section is animated every element is responsive and every interaction is Silky Smooth this isn't just a regular landing page this is an experience let's face it building ordinary websites makes you invisible your work drowns in a sea of sameness and the result is crickets from job applications hiring managers who ghost you and clients who won't give you a Second Glance it's like screaming into a void to break through you need to create the extraordinary something that captivates users showcases your talent and makes you stand out from the crowd and that's exactly what you're about to create this video you'll learn to build jawdropping Parallax animations at 60 frames per second you'll create elegant infinite scrolling animations with Fades that effortlessly flow on and off the screen and you'll add micro interactions that breathe life into the page but this isn't just about Aesthetics we'll be using the same Cutting Edge tools that are dominating the front-end Dev landscape for starters we'll build our page on a foundation of react which is the same framework that Facebook Netflix and Airbnb used to build their interfaces we'll also be using nextjs to make our page blazing fast and SEO friendly from the ground up for styling we've chosen Tailwind CSS to create our Styles at lightning speed and to bring our show stopping animations to Life we'll be using framer motion which allows us to create complex animations with minimal code but this video is more than just a cool project with amazing Technologies this could be your golden ticket to Landing that dream job attracting high-paying clients or starting down a new career path imagine the doors this project could open for you in short your dreams aren't years away they're one project away and we're building that project right now now before we do anything else make sure you visit the link in the description to download all of the assets for this project including the Pixel Perfect figma Design and the starter template with all of the images and icons pre-export and ready for you to use now before we dive in let's take a look at what we'll actually be building we'll notice right away that there's an animated hero image and as we scroll you'll notice that the nav bar is blurred and that there are Parallax effects in the hero to create the images that move with the scroll position as well as we scroll down to the logo ticker you'll notice that the logos smoothly come in appear in the middle and smoothly transition out of the page on the left hand side down down in the product image section once again we're using a great smooth Parallax effect to create images that enhance our product image on this landing page down in pricing we have a subtle micro interaction for the popular pricing card that shows a gradient that animates from left to right and down in testimonials we have an impressive infinite testimonial scroll effect with different columns that move at different rates of speed that looks amazing on this page and as we go to the bottom called action section you'll notice once again we're using a parallax effect to create a page that looks truly incredible to get started all we'll need to do is drag the template that you've downloaded into your IDE and that will bring it up then we'll need to open our terminal and ensure that we have everything installed by running a simple npm install that should install all of our dependencies in just a few seconds and make sure that we are ready to dive into this project in order to bring up our project in a browser so that we can see it all we need to type is npm runev and that will start the next.js server and give us a URL in order to show this so we just need to command or control click on that URL and that is going to bring up the project in our browser now once we opened up our template folder let's go ahead and dive into the folder structure so that we can understand what we're getting ourselves into and where everything is located so inside of the source directory we can see that we have four other directories we have the app directory which is holding our layout in our page. TSX that we're going to be working on as the main nextjs page we also have our assets directory which holds all of our images and icons that we're going to use during this project inside of components we have a folder here we don't have anything here yet but if there are reusable components that we're going to use throughout the project we can break these out and put them inside of our components folder so that's what that is there for and then inside of sections we have all the sections that we're going to work on starting with the header and going all the way through the footer now all these sections right now just have an exported react component that returns null so it's not going to show up until we have something to show let's go over to our package.json file and we can see that we have a couple of dependencies as well as Dev dependencies so we're using react we're using react Dom version 18 we're also using nextjs as the uh framework for this page and then we have framer motion which of course we're going to use to bring in all of those great animations and effects that are really going to make make our page pop we have some Dev dependencies as well so we're bringing in uh an SVG dependency that's going to make it easier for us to use icons as components we also have typescript definitions for node react and react Dom eslint is going to warn us if there's anything wrong with our code as we type it and post CSS is used as a dependency for Tailwind CSS which we're going to be using throughout this project Tailwind merge is a dependency that I haven't used on a video before but we'll dive into what that is and how to use that and how that will really help us out as we're writing our Tailwind CSS and then of course we have typescript which just helps us make sure that we're writing good code that's actually going to execute and work the way that we want it to now that we know what's in our package Json let's go and head over to our app directory and take a look at our layout and our initial page template so in the layout we can see that this is a essentially a default nextjs layout with a couple of things that I've changed so the first thing I've changed is we're using the DM sand font from next font Google so that'll give us the correct font that we're using for our design we also have imported tww merge and that's going to help us to merge tail and CSS class names together in a really easy way so there's packages like class names and clsx that do essentially the same thing tww merge just gives us an additional capability because it's not going to allow us to write conflicting TN CSS classes it's actually going to merge those together into something that will make a lot more sense you can see that we have a little bit of metadata as we scroll down the page and of course we have our root layout which just basically defines our HTML our body and allows us to drop in our page right here where it says children I have included the DM's class name as well as the anti- alest class which is really important to make our rendered Page look a lot closer to our design because of the way the fonts render and we have a background color as well that's just going to help us to make the nav bar work a little better and a little more easily because we need it to blend into the hero section now you'll understand what we're talking about as I dive into the page itself under page. TSX right now we just have this exporting an H1 with hello world and that's just going to ensure that when we bring up the browser that we're seeing that this is actually being rendered onto the page so this is really just a debugging device we're going to drop all of our sections into this page. TSX file as we move along okay I think that pretty much does it for directory structure let's go ahead and make sure that we actually see something show up on the screen when we run our Dev command so open up your terminal and all I want you to do is go ahead and run npm run Dev and that should start up the nextjs server as it has here and then we'll go ahead and open up our browser and see what this looks like now I've brought up my browser in a mobile view but as you can see it does say hello world and it is using the DM Sands the correct font so that we know everything is hooked up correctly so I'm going to go ahead and close that terminal and then let's take a look at our design over in our design we can see that we have a desktop a tablet and a mobile version so this is great for responsive design we have every single view that we need in order to create a responsive page now we're going to be primarily building the mobile version and then creating the responsive variants but just so we understand what's in the design and how we're going to build it let's look at the desktop version first so in the desktop version you can see that we have a couple of things at the top we have a banner right here that says streamline your workflow boost your productivity get started for free so that'll be part of our header and then we have a Navar as well looks like it has a logo with some navigation features on the right as we scroll down we have this amazing hero section that has a couple of images we're going to be adding a great Parallax effect to those and we'll have this main hero Cog here here that we're going to add an animation to as well over on the left we have our Tag and Title description and buttons so we'll be creating all those as well scrolling down we have the logo ticker now this logo ticker is going to look like when it's all said and done it's going to look like these are infinitely scrolling to the left this is a great effect for these and I can also see that it's covered with some sort of gradient that just makes them disappear on the edges so that's going to be a really really nice effect when that's all done we also have a product image we can see that the product is very cleanly displayed alongside a couple of other great images added to the left and right so those are really going to show off that product screen very well we have a pricing section this pricing section is interesting because you usually don't see the prices stacked from short to tall but of course we can do that easily with flex box and then we're also going to add a great animation on this most popular tag here you'll see how we do that once we dive in right there as we scroll down we can see we have our testimonial section the testimonial section has three different Columns of testimonials and like you saw we're going to make those flow from bottom to top with some more animation effects and then we won't forget our call to action section we've got a couple of images that are going to have a parallax effect to the left and the right a couple of things that you might notice or might not notice about this design is that every single header also has a little bit of a gradient to it so you can see this Pathway to productivity goes from a black to like this uh dark blue so we're going to be creating that for that and then as you scroll to each of the other headers you can see that those also have that same effect so we're going to be creating that effect and applying it to all of our titles for all of our different sections of course we're going to be starting with the mobile design so let's go ahead and take a look at what that looks like real quick we pair that down a little bit because we don't have quite as much real estate so we're going to be creating that a little bit differently we're going to make sure that we have our hamburger menu icon in the top instead of the normal menu and we're going to take away a few of the images as we scroll through our mobile view so that we can provide a great view for phones and other mobile devices nothing too crazy here most things are just stacked on top of each other the one thing that is going to definitely change is our testimonials where we're only going to show one of those columns instead of all three and then of course we get down to our footer where we have our logo our social icons and a copyright now as I've done in other videos we're going to break this down and we're going to build this one section at a time we're going to make sure that that section is fully responsive before we move on and then at the end I'm going to go back and I'm going to apply all of the animations and effects that are really going to make this page stand out so for starters we're going to be creating our header which is going to be both the banner and the navigation now the reason that we're going to create these together in this particular case is because we're going to make both of these sticky which means they're going to move along the page as the user Scrolls so we're going to create these within the same component and show them to the user together go ahead and come back to your template and open up your header. TSX section and we're going to apply this to our page. TSX so let's go ahead and call this make sure this is called header and then we're going to return just some header text to ensure that this shows up and then on our page. ttsx we're going to import that component so we're going to import our header from at/ section slhe header and then we're going to return this right here here as a header component and as we can see it did show up in the browser so that works well now that we know that works let's go ahead and dive into our actual header code all right now that we are in our header let's go ahead and start creating our Banner so we know our Banner is going to have some text inside of it so let's create a div and that text is probably going to be inside a paragraph and it's going to say get started for free and we also know that that div is going to have a class name of we're going to flex that and make sure that it's Justified to the center our items are centered we want it to have a little bit of padding so py3 for that padding the background is going to be black so BG black for that and then the text is going to be white so we have text white for that our text is going to be small as well so let's add in our text small and ensure that we also have our icon next to our Banner text as well so I'm going to go ahead and import that now since we have svgo we can import the icon as a component instead of just importing an SVG file so let me show you how that works I'm going to import my arrow right icon I can find it inside of my asset so I have this Arrow right.svg file I can import that with a cap cap letter and that will make that a component if I just say Arrow right from at/ assets SL error right.svg and then I can just place this right next to my paragraph As a simple component now it's way too large right now we're going to need to bring that down with our class names and we're going to just say that the height is going to be 16 so H4 the width is also going to be 16 that's width four and then we also want that to be in line flexed and we're going to say justify Center and items Center that should line everything up correctly now we want the gap between our text and our Arrow to be there so we can do that with this Flex box but since we're going to have some additional text that's going to be showing up later let's go ahead and wrap this paragraph and the arrow in a different div let's go ahead and give that a class name of inline flex and then let's go ahead and give it a gap of one and ensure that our items are aligned to the center and wrap that div around both of our paragraph and our Arrow right and hit save so that did add those four pixels of Gap there and it also made sure that everything was aligned correctly in our Banner okay now that we've completed our Banner at least in the mobile view let's move on to our Navar so I'm going to go ahead and create a div right here for our Navar and of course we're going to have our logo on one side and our menu icon on the other now this is throwing an error right now because we have two divs that are siblings of each other without having a wrapper so of course we know that we're going to wrap both of these because we want these to be sticky to the top so I can wrap these in a header semantic tag and then I can put the ending header at the bottom there and that will allow that to work correctly now let's go ahead and import our logo image let me go ahead and import our our logo from my assets at/ assets SL logo SAS PNG file and then we'll just use that by bringing in next image as well so that we can have optimized images from our nextjs featur so let me go ahead and import the image component as well from next image and then we'll use that image component here so I'll say image my source is going going to be my logo my ALT text is going to be my SAS logo my height and width are going to be 40 pixels each and let's see how that shows up okay so that looks great we also know that we need a container in here so let me just go ahead and add a div class name equals container around that that'll give a little bit of space between the edge of the page and of course the interior of our component and we know that we're going also going to have some padding top and bottom here so let me add a class name and let's say that this is py5 for padding to the Y direction of 20 pixels and save that and that does indeed add the padding that we need to the top and bottom now on the other side of our container we know that we need our menu icon so let's import that as well we'll import our menu icon and we're going to get that from at SL assets menu. SVG and we can bring that in as a component as well just by adding menu icon right like that our menu icon is way too big as well so let's go ahead and add a class name to that and let's say that our height is going to be 20 pixels our width is also going to be 20 pixels and that brings that down to size now we know that we want these Justified differently with flexbox so let's go ahead and wrap those in a flexbox container with div class name equals flex and let's go ahead and give that ending div around the menu icon and the image and then we're going to say that these need to be aligned to the center and Justified space between with our justify between Class the last thing that we're going to want to do right now is go ahead and make this header sticky but we're not going to be able to test this out yet because we don't have any way to scroll until our page is actually long enough to scroll so I'm going to go ahead and add a sticky class here and let's say that make sure that nothing changes and of course we'll want to make sure that that happens immediately by setting top zero now that we've completed the mobile view of this let's look at the other break points if we take our browser and we go to the tablet view we know that this is where we're going to want to see our menu and our button appear in the header so let me go ahead and stretch this out a little bit so we can get a little bit better view of this and then we're going to want to put in that CSS and HTML that makes that work so for my menu icon I'm going to hide that when I get to this size so I'm going to say medium hidden to make that not display anymore and then I'm going to want a navigation to show up here so I'm going to use my nav tag and we're going to put a few different links here it looks like those names are about we're also going to have a link for features customers updates and help and we're also going to have a button that lives here so I'm going to use the button tag and we're going to say get for free now that navigation is going to be hidden in our mobile view so I'm going to add the class name of hidden and then when we get to the medium view we're going to show it with flex so that it shows as f in this View and then we're going to ensure that we have the correct gap between all the items that should be 24 pixels we also want the text to by default be black with a 60% opacity so I'm going to say text black/ 60 to do that and we of course want our items to be aligned to the center now we just need to go ahead and style up our button so let me go ahead and add a class name to the button itself and this is going to be BG black we know that we're going to have text white here we're also going to give it a little bit of padding left and right so that's going to be PX4 for 16 pixels of padding left and right py2 will give it top and bottom padding of8 pixels we're going to make it rounded large to give it 8 pixels of Border radius we want the font to be a little bit heavier so that's going to be font medium or 500 and then we also are going to just go ahead and make this inline Flex so inline Flex we're going to align everything to the center and AD justify it to the center and that should take care of our button styles for now oh one more thing we also want to make our text a little bit tighter using the tracking rule so I'm going to say tracking tight and that will give it the2 and 12% of letter spacing that will just make the text Pixel Perfect to the design the other thing that I'm noticing as I look at my design versus what we have right now on the screen is that our Banner isn't quite right because we have additional text when we get to this screen size so let's come back up to our Flex container and add that in as well so I'm going to add another paragraph and that's going to say streamline your workflow and boost your productivity now that has a little bit of different styles that has a little bit of lighter text so let's add a class to that as well and say the text white uh sl60 will give it 60% opacity so that that's correct we also want this to be hidden on mobile but we want this to show up on tablet so I'm going to say medium we're going to show that as a block display block and then we also want to have a little bit of gap between this paragraph and our get started for free text so we're going to need to add that to this flexed container here by saying Gap three for our 12 pixels of gap between those two lines now it should stay the same between the tablet and the desktop view but of course let's go ahead and take a look and ensure that everything looks correct so I've gone ahead and opened up my desktop view let me go ahead and open this up so we can really see what we're looking at here and this is the desktop view everything looks right to me right now so that means that this section is complete it's Pixel Perfect to the design design I'm really happy with how this looks right now let's move on to the next section coming back to our design the next thing that we're going to be taking a look at is the hero section so we have desktop tablet and mobile once again let's go ahead and look at our mobile design and then we'll look at how that's going to change in the tablet and desktop so in the mobile view we can see we have a couple of things here we have some spacing here we have a tag title a description a couple of buttons so we're going to be wanting to create some components to be able to reuse our button Styles and then we have this Cog image here this is going to be flexed top and bottom as we get to our tablet view that's really where the section is going to start to come alive that's going to start to put our text on the left and our Cog on the right and it's also going to add this great cylinder image here that we're going to animate with Parallax Styles as we move forward in the Des top view this is probably one of my favorite parts of this page but we see that it adds an additional noodle image here that we're going to put on our bottom right hand side of the hero and that's also going to be Parallax animated now this section isn't going to be all that difficult but of course we're going to need to pay close attention to the specifics of the design to ensure that we get a Pixel Perfect result when we're all done coming back into our code let's go ahead and open up our sections hero. TSX file and ensure that we can actually see this Hero on the page so I'm going to add a return value of a string of hero and then in my app page. TSX I'm going to go ahead and import my hero component from / sections hero and then inside of here I'll ensure that we can see the hero by just adding the hero component here now it's going to yell at me because we once again are running into that sibling problem with react so we're going to go ahead and add a simple react fragment around these and that will ensure that we can add siblings next to each other as you can see as soon as I save that we do see our hero text on our Mobile screen so that means we're ready to dive in to our code back in the hero component let's go ahead and start creating our code so we know that we're going to wrap this in a semantic section tag inside that section we're going to go ahead and create create a container to ensure that our content isn't touching the sides of the page I'm going to give that a class of container and then inside our container we'll go ahead and create a left and right column so I'm just going to wrap that for now in a simple div tag and this is going to be the text that we're going to put inside of our hero now the first part of our text is going to be a tag so I'm going to say div and I'm going to go ahead and give this a class name I'm not going to put anything there yet and I'm just going to put the tag content of version 2.0 is here below that we know that we'll have our title so I'm going to give wrap that in a probably an H1 in this case is semantic H1 and then inside that title we're going to say Pathway to productivity and then we're going to have a description below that I'm going to wrap that in a paragraph tag and I'm going to copy and paste that text from the design so that's going to say celebrate the joy of an accomplishment with an app design to track your progress motivate your efforts and celebrate your successes below that we're going to have two buttons we know they're going to be flexed left and right so I'm going to go ahead and wrap those in a div and then go ahead and add the button tags so we're going to have one button that says get for free and we're going to have another button that's going to say learn more as soon as I save that we do see that show up so we have all of the text that we need let's go ahead and dive into the styles for this text for our tag we want the textt to be uh 14 pixels so we're going to take say text small that's also going to be inline flex and we're going to make sure that there's a border that border color is going to be a 222 color so pound 222 and then we're also going to say that that is a 10% opacity so that's sl10 we're going to add 12 pixels of padding to the left and right with PX3 and we're going to add four pixels to the top and bottom with py1 we also want that to be rounded and that's going to be rounded large to give that 8 pixels of Border radius a lot of the text elements in this design also have a little bit of a letter spacing adjustment and this tag is no different so we're going to give this a tracking tight and that's going to give that a 2 and 1 12% letter spacing decrease to just bring the text in a little bit now it's time to style our title so that's going to be our Pathway to productivity let's go ahead and give this a class name as well this title is going to be 48 pixels tall it's also going to be font bold we're going to set the tracking or the letter spacing to tighter to give it a 5% letter spacing and here is where we're going to do our gradient effect over the text so we're going to want to do is set the background of the text to the gradient we're going to make the text transparent and tell the owser to clip the gradient to the text so how we're going to do that is we're going to say BG gradient to bottom to B and then we're going to say from black and that's going to go to a 0 01 e80 color then we're going to make the text transparent and we're going to say that the background clip is going to be around the text itself and that creates the amazing gradient that you see here we also want to ensure that we have the right amount of margin on this so I'm going to add a margin top of 24 pixels and that will push that down from the tag appropriately coming over to our description let's go ahead and add a class name to this we want the font size to be 20 so that's going to be text XL we're also going to set a custom text color so that's going to be text and then we're going to give it a 01 0 d3e color and that's going to give it that dark blue and we want our tracking or our letter spacing to be a little bit tighter and we're going to say tracking tight and that's going to ensure that we have the correct amount of letter spacing to give it the spacing between the title and the description let's go ahead and add mt6 and that should be the 24 pixels of spacing that we see in the design moving down to our buttons we can go ahead and give this a class name of flex just to be able to make sure that we can control the container we want to ensure that there is four pi of spacing between them with gap-1 that they're aligned to the center with item Center and that we have 30 pixels of space between the buttons and the text and since we don't have an exact value for that entailment I'm just going to say Mt 30 pixels and that should give us 30 pixels of margin for the buttons themselves we know that we've already used a black button before so this is probably a good time to start creating some utility classes to allow us to quickly add styles two things that are styled exactly the same way so we know that up in our header we have some button Styles and we can see that we have a bunch of these right here this button is styled exactly the same way so I'm just going to take this and I'm going to edit our Global CSS with these Styles so we can create some utility classes now the way that we want to do this in Tailwind CSS is not to simply just create a class name here like BTN and then put some Styles right here the reason this doesn't make sense with Tailwind is because when we do this what ends up happening is even if we don't use this class it's always going to add the CSS to our output CSS we don't want anything we don't want to use but we do want to use this however we also want to be able to override these classes as well so the best way to do this is to add it to one of these layers that tail and CSS gives you so I'm going to do is I'm going to say in our components layer or at layer components I'm going to add in our button class and that button class is going to have all the styles that we need now we know that our button background is going to change the text color is going to change depending on what type of button it is so we're also going to go ahead and have some utility classes for that as well we're going to say if it's a primary button or BTN primary that's when we're going to give it the background black and the text of white so I'm going to pull this down here and go ahead and give that that apply rule as well now that we've done that we also know that we're going to in this particular section have a text button and that one is going to have text black and a background of transparent so let's go ahead and add another utility for that let's say background text and we're going to add apply text black and BG transparent after we've added in those utilities let's come back to our hero and see if those work so on these buttons we're going to give it a class name of BTN for button and it looks like we made a mistake with one of our classes let's go back and check this for a second okay so align items that isn't a real class that should be items Center so if I save that again we should see this come back up correctly let me go back to my hero and let's say button primary to see if that works okay so that's creating a great primary button and of course we want this to be a button as well so let's give that a class name of button that utility is going to encapsulate all of our tracking all of our font Styles and of course we want this to be button text so that it has the correct background and color the other thing that's inside this button that we haven't accounted for yet is an arrow so I'm going to wrap a span tag around my text just so I can separate it from the arrow that we'll bring in and then at the top of the file I'm going to come up here and import my arrow icon and that's going to be from at SL assets SL arrow right.svg and then I'm going to use that inside my button so let me go ahead and add my arrow right component there or excuse me Arrow icon was what that was called so let me go ahead and correct that to Arrow icon as is the casee when we bring these icons in we need to size them appropriately so let me go and add a class name here of H5 and width five that should make it the 20 x 20 pixels that we need we also want to add a little bit of spacing in between the arrow and the text and that looks like it's going to be just a gap of one to give it the four pixels of spacing that we need now those utility classes worked out perfectly we're going to use that concept as we continue through this design to ensure that we're encapsulating some reusable utilities with Tailwind CSS so that we can add that and not have to rewrite the same Styles over and over so that was a definite win for this design moving down the hero we know that we need our Cog image in here so I'm going to go ahead and import our Cog image and that's going to come from SL assets. PNG and we're going to use that with next image as well I'm going to go ahead and import uh next I'm going to import image from next SL image and I'm going to drop that into the correct spot this is the div that wraps our content we're going to go ahead and create another div below that and that div is going to wrap our image let's go ahead and throw our image in there our image component our source is going to be our Cog icon or Cog image our alt attribute is going to be Cog image and let's see how that shows up so that shows up perfectly that's exactly what we wanted to happen in order to give the spacing between the image and the text let's go ahead and give this div a class name and let's just say mt20 that'll give that 80 pixels of spacing between our text and our Cog image now there's a couple of things that are missing right now in our hero in our mobile view one of the things is that there's a gradient that goes goes from the bottom left of the hero section all the way up to the top so we need to add that in the second thing is we're also missing any kind of spacing between the hero and the other content on the page so we're going to go ahead and add that in as well for the spacing we can take care of that very easily let's go ahead and add a class name to our section and let's give it 32 pixels of spacing on the top we're also going to give it the required 80 pixels of spacing on the bottom and that will separate our tag from our navigation like we see there and it also gives it a little bit of space down here to make it much more accurate to the design now in order to create the radial gradient that we see in the design we need to go ahead and use a custom Tailwind background image of radial-g gradient in that radial gradient we're going to make it an ellipse because it's not going to be a straight Circle it's going to be 200% of the width and 100 100% of the height and we're going to leave that at bottom left which means it's going to start from the bottom left it's going to go from a hex code of 183 ec2 and it's going to go to a hex code of e AE F which you should recognize as our background color and that's going to be at 66% and as soon as I hit save you can see that that that gradient does appear so that's looking really good now that we can scroll we're seeing what we're missing on our Navar in our header component one of the things that we're missing is we don't have any kind of blur effect here and that's actually really easy to add in with tailin CSS so now that we've done this let's go back to our Navar and see if we can go ahead and add that in so I'm going to go back to my header. TSX component and of course we don't have any background yet which is fine we can just say backdrop blur small and that will give it the four pixels of blur let's see if that's working and indeed that's working perfectly that looks really nice gives it just that nice effect of blurring the content as it Scrolls under the sticky header which is exactly the effect that we wanted now that we took care of that let's go back to our hero. TSX and see what we can do here let's go and look at what our responsive design looks like right now and then we'll ensure that we can create that according to our design moving over to our tablet this right now is looking much different than the design and most of that is because we don't have our Cog to the right so we need to ensure that we have these flexed appropriately so right now we have all of our content inside of this div and then we have our image inside of this div we need to wrap those in a flex container so let me go ahead and create another div around both of those just going to copy and paste that ending div tag right there hit save and that should put it inside of the same container and then we're going to give that a class name of flex it's going to ensure that those go left to right now of course we don't want this to happen until the right time so we only want this to take effect when we switch to the medium screen size then those will be flexed let's ensure that we didn't mess up our mobile as we scroll back down and indeed we didn't because we did it the right way when I go over to the tablet view there are a couple of things that we want to take care of the first one is we want this image to actually not really be constrained by the amount of space that we have it actually needs to go off to the left of the page so there's a couple of things that we're going to have to set in order to make that happen the first is we want to give this a defined width our our content did we want to give that a defined width at this screen size let's go ahead and add a class name here and let's say medium the width is going to be 478 pixels that's going to make sure that we have the right width on that the other thing that we're going to want to do is at this size we want a defined height on our div right here and we also aren't going to want this to take effect anymore so let's go ahead and give a medium of mt0 so that we don't have that happening we also want to give it a defined height so medium it's going to be have a height of 648 pixels that will ensure that we have the correct amount of of space for our Cog and we're also going to tell this to go ahead and grow and take up more space as necessary with medium flex one now that we've done that we can also make sure that our Flex container is aligned to the center with items Center and that will ensure that we have are indeed aligning that content to the center now it looks like everything's out of whack right now but it's actually exactly as we need it in order to get our image to grow to the right size at this size we need this image to be positioned AB at this size we need this image to be positioned absolutely so let's see how we can make that work let's go ahead and give this a class name of medium absolute to ensure that that's positioned absolutely we also want make sure that it's inside the right container so I'm just going to make sure that this is positioned relative as well and this is going to grow so we're going to say that the height is going to be the full size of that container of course that's only going to happen at the medium size the width is going to be Auto and in order to get rid of some default Tailwind reset Styles we also need to say that the max width is not going to be we're not going to pay attention to the size of the container for that at this size screen we're also going to bring the Cog icon over a little bit to the left so that's going to look like medium negative left 6 that'll give that 24 pixels of spacing towards the left of the screen at this screen size there's just a couple more things that we're going to need to take care of one of them is going to be the size of the padding so we have 8 and five right now representing 32 pixels and 80 pixels at this screen size we want the padding top to be only 20 pixels and we want the padding bottom to be the 40 pixels of padding there to make that equal to what's in the design we can also see that one of the things that does change is our title size and that's going to go from text 5 XL to text 7 XL to ensure that that is the right side size and of course we only want that to take effect at this medium screen size now if it still looks like there's something missing that's because of this screen size of course there is and that is going to be our cylinder image that should be showing up absolutely positioned next to our Cog so we'll want to go ahead and import that as well so we're going to import our cylinder image and that's going to come from @ SL assets slash cylinder. PNG and we're going to use next image to show that as well this is going to be inside of the same container it's going to be over our Cog image if there ever overlap due to our Parallax effect we're going to use next SL image to show that as well so our source is going to be our cylinder image our width and height are going to be 220 in this case and our alt tag is going to be cylinder image now that shows up as well but of course it's not showing up in the right position so we need to go ahead and add a class on this as well to ensure that it does show up in the right position this class name is going to say that of course on the mobile size it's going to be hidden so we need to add that first and then when we move up to the medium tablet size that's where we're going to switch to block to get this the right position we're going to say that the it's going to move towards the top and that's going to be 32 pixels towards the top it's going to move towards the left that's going to be 128 pixels there and of course we're going to need to also position this absolute and that puts our cylinder in the right spot the radial gradient seems to also be a little bit of a [Music] problem because we're stopping this color a little bit too early or getting to this color a little bit too early let's try that at 100 and see what happens and that looks much closer to the design while still keeping everything intact the other thing I'm noticing is that we do have a little bit of overflow on our screen right now we don't want that to happen so we also added an overflow X clip and that should ensure that we're clipping the content on the left and right of the screen and that works well but as I scroll what I'm seeing is my cylinder's actually overflowing on top of my sticky navigation so we're going to make sure that if we go back to our header that this at least has a little bit of zindex so it to ensure that it shows above everything else so let's go ahead and give this a z index of let's just say 20 and that should allow it to overflow everything else on the page and that works beautifully going back to our hero there's only a couple of things that we need to update in order for this to look good on desktop so let's first take a look at our desktop view and see how it's looking the first thing I'm noticing is that we don't yet see the noodle image that's in the bottom right that I'm seeing in my design so let's go ahead and import that one under the cylinder image I'm going to import noodle image from at/ assets sl.png that'll give us the image that we can use and then we're going to put it down here in the bottom uh using next SL image we're going to give that a source of our noodle image we're going to give it a width of 220 and of course we're going to want to add a class to this one as well so let's go ahead and save this and see where it shows up now we do want it to be absolute as well so we're going to give this a class of absolute and it's going to be 524 pixels from the top so I'm going to say f top 524 as a unique value for Tailwind CSS and uh from the left it's going to be 448 pixels as well now this we do want to only show up once we get to our desktop value so we're also going to say hidden and then we're going to say that when it gets to the desktop view or the large view then we're going to go ahead and show it as block nextjs also doesn't like that I don't have an ALT tag here so I'm going to give it an ALT tag and I'm going to say noodle image right here as well it also needs to be rotated by a little bit in the design it's rotated by 30 pixels so let's go ahead and give it a rotate of 30 and that does if we use the degree add-on there so we rotated at 30° that looks great the only other thing that I'm seeing is that on the desktop view our Cog is a little bit close to the text it was mov moved over on the tablet in order to make it more visible on the screen but on the desktop view we don't need that anymore so we're going to say large left zero and that should take care of moving that to the correct spot and that's it for the desktop view let's take a quick view at our entire page to make sure everything looks correct we're actually going to switch to the horizontal View and see them all at once just so that we can make sure that we haven't broken any of our designs as we've been creating our code so the mobile looks great we see that sticky header it's working perfectly uh it's overlaying our hero and then let's see this is the tablet view we're seeing that that looks awesome as well and then coming over to the desktop view we can see that that looks great as well this is overflowing a little bit but that's fine of course because we're going to put a section under here and that's going to uh take care of that uh little bit of extra space that we're seeing there but other than that this is looking perfect it's looking exactly like we want which means it's time to move on to the next section back in our design we've taken care of the banner the Navar and the hero section let's take a look at the next section and that's going to be this logo ticker that's a small section on mobile but it's definitely going to be eye-catching once we get the logo infinite scroll working so on mobile it looks like there is just a couple of logos shown as we get to the tablet view we see a few more logos and of course on desktop we can see the full entire list of logos these are going to be scrolling from right to left and of course we can see that it's also has some sort of linear gradient over top as well to hide them as they come from the sides of the screen without further Ado let's go ahead and dive into our code and start coding this section up now that we're back in our code let's go into our logo ticker section that should already be created of course we're returning null let's go ahead and return the words logo ticker here and save that and then we're going to go into our app page. TSX and we're going to import that section into our app so let's import logo ticker fromex logo ticker and then we're going to come in here and go ahead and create our logo ticker down at the bottom of our list of components that we've brought into the homepage once we save and scroll down we should be able to see the words logo ticker which we do which means that our logo ticker is connected correctly so I'm going to go ahead and close the p page. TSX and we'll spend the rest of our time here for this section now we don't need these logo ticker words so let's go ahead and create a wrapping div around here the primary content of the section is of course going to be our images so let's go ahead and import those at the top of the file so I've got my first one is uh Acme logo so I'm going to have my Acme logo from SL assets Acme logo AC me.png I'm also going to import the quantum logo from assets logo Quantum I have the echo logo and that's going to come from the assets SL logo D Echo I'm importing my Celestial logo and that's going to come from logo Das Celestial and then I have my pulse from assets logo pulse and my last one is my Apex logo and that's going to come from at SL assets logo dapex PNG okay so those are the logos we're going to put those all inside of a container so let me go ahead and create that div with a class name name of oops class name of container after we've created that we're going to put all of our logos inside a flexed container so that's going to be another div that we're going to flex here in a second and then of course I'm going to bring in next slash image as well I can just start using next image it should import it for me so if I hit enter on image and I go down to my next SL image it should do that automatic import for me which it does there uh for each of these images I have have uh an image tag here so I'm going to say Source equals and then I'm just going to fill in with my images themselves I'm going to have an ALT tag for each of these and I want to go ahead and just use a bit of IDE magic to create these so what I'm going to do is I'm going to take my import statements I'm going to copy and paste these and I'm going to paste them in to here and I'm going to see if I can create an ALT tag that allows me to not have to do a bunch of typing almost there let's see I can probably use a helper to tell it to transform to uppercase which I can okay so I just did that and that allowed me to get through that a little bit quicker and then each of those logos should be showing so let's save that and see what we're seeing here the other thing that I'm noticing is that each one of these should be the same size and that should uh they should have the same class names since we have a utility essentially utility function being used here our utility class let's go ahead and see if we can create that same thing inside of our global. CSS so I'm going to say uh logo ticker image and we're going to give those the same uh class names and then we can just apply the Styles all at the same time so each of these I'm I'm going to have go ahead and select all these I'm going to say that the class name for all these is going to be logo ticker image and that will allow me to use this utility class that I'm defining in global. CSS so back in global. CSS I can say uh h8 for 32 pixels let's go and apply that and see okay we also want the width to be Auto so let me say W Auto that works well I think that's pretty much all we have to add as far as classes but that allowed us to do that without typing that out for each individual image itself the other thing we want to do is of course make sure that these are flexed so let's go ahead and class name and let's say Flex the gap between them is going to be 56 pixels so let's go ahead and add that Gap in there and then we also want to say Flex none that should ensure that it's actually going to respect what the actual logo height and width are when this is all put together correctly and then I'm going to wrap this in another div and this is essentially going to be the div that I'm going to use to hide left and right and put that uh mask over so this one is also going to be Flex let's see class name equals Flex it's going to be overflow hidden and then I'm going to put a mask image over this now this is going to say mask image and then we're going to have a linear gradient say two right transparent black transparent let's scroll down a little bit and see if we can see that and yes we are so essentially what we're doing here is when the mask image is transparent it's actually going to show through the background color when it gets to Black that means it's actually going to show the color uh that's inside the the div itself and then when it goes back to transparent it's showing the background once again so we're essentially just showing through the background until it gets to the center which we're not showing any uh then we're showing the image itself and going back to transparent so this is a great trick for this I've used absolutely positioned divs in the past but the great thing about mask image is that absolutely positioned divs can of course take Mouse clicks as well so you can copy and paste through an image mask but you can't always copy and paste through an absolutely positioned overlay on top of the logos themselves so this is a great strategy to be able to use if you're doing something that needs this kind of treatment the only other thing this section needs is to go ahead and add the padding top and bottom to ensure that we have some space in between this section and the last and of course the next one so I'm going to say class name and that padding top and bottom is going to be py8 for 32 pixels and we also have a BG of white on this particular section now it looks like my logo just disappeared but of course I just had to scroll down a little bit and then I can see my Logos there's a very slight difference between the actual background that is on the body by default and white but there is definitely a difference there so we want to call out that that is indeed white not the background that we're using for our Navar now this is looking good so far but let's see how it's looking in our different responsive views when we pull it out to tablet we can see that it's showing up well but we don't have quite enough padding on the top and bottom in the tablet view so so we need to go ahead and add a medium responsive modifier here and then we need to say py12 and that will add the responsive values that we need there I'm not seeing anything else from this section on the tablet view so let's go on and move to desktop and make sure that everything is still looking good there I'm going to slide this over so we can get a bigger view of the desktop and there we're once again seeing our noodle image now it's overlaying this section which works perfectly now it doesn't look look like there's any changes needed from this view either once again we're going to go to view all of our horizontal screen sizes so that we can ensure that everything looks good left to right and when I scroll down on my mobile in this browser I can see that this looks good here as I scroll over to tablet it looks good there and of course on over on desktop it looks good there as well so this section looks great if the responsive views are done let's move on to the next section back in our design we're on to the next section which is the product showcase now this is where we're showing a featured shot of the product image it's not a ton to look at on mobile but of course as you move up to tablet and desktop you start getting these decorative images on the left and right and of course the Parallax effect when we stick that in there is just going to be impressive what I'm noticing about this particular part of the design is that we do have that same title effect that I talked about where we have the gradient over the text going from black to that dark blue it looks like we have some text here as well another tag and of course the image itself so it doesn't look like there's anything too crazy here we of course will want to make our responsive views appropriate so that the title text changes size when it comes from Mobile to tablet it looks like it stays the same size between tablet and desktop and there's not too many other changes that we're going to have to make but of course we're going to want to bring in these images and make them show up at the right time and of course in the right position now that we've seen what our design looks like let's go into our sections and open up the product showcase. TSX file once again we're going to want to return product showcase and this will allow us to see if this component is hooked up correctly we're going to come into app SL page. TSX and import that section so import product showcase from / sections product showcase and we're going to drop this into the bottom of our home component so this is going to be product showcase and as soon as we hit save we should be able to scroll down and see product showcase show up which of course we are which means that everything is hooked up correctly let me close out my page. TSX and we'll get to work on the product showcase first thing I like to do is add the semantic section tag that's going to wrap our entire section and of course we're going to use a container to wrap our content so let me put that container in there and then here is where're going to start introducing the content so the first part of the content is going to be the tag and that's going to say boost your productivity we're also going to have a an H2 a semantic h2 tag for the title of this particular section that's going to say a more effective way to track progress and then as we move down we're going to have a paragraph tag and a copy and paste this from the design but it's going to say effortlessly turn your ideas into a functional responsive SAS websites in just minutes with this template let's ensure that everything is showing up as far as content goes the last part as far as content goes in this particular section is of course the image so let's go ahead and import that we're going to import the product image from SL assets SL product- image.png and then we'll use next image once again just by starting to use it and selecting the right import we're going to give it a source of product image a width and height will be fine that's not a problem our alt is going to be product image that works well and then we're probably going to have a class name on this I'm not entirely sure right off hand because we might not have to make any changes to it and let's save that and ensure that all of our content is showing up like it should which of course it is now let's dive into actually creating the mobile styles for this section the first part of it is going to be adding our background gradient and of course our padding so let's give this section A Class name and let's give it a background gradient BG gradient to bottom and it's going to go from our white or hasht FFF we can do six values that's fine and that's going to go to a custom value of D2D CF that will create the gradient background behind that and make it blend with the section above it we'll also want to give it the 24 or sorry excuse me 96 pixels of padding on the top and bottom so we can do py4 and that will give us the padding that we need for this particular section now I'm noticing that the styles that we can apply for this tag are very similar in fact they're exactly the same as the styles for the tag here at the top and that means that we can once again apply another utility class to bring over the same Styles and use them again and again so I'm going to go into our hero. TSX and I'm going to find where we defined the tag Styles it looks like it's right here and we're going to copy and paste these same Styles and we're going to bring them into our global. CSS file as a utility so I'm going to call this utility tag and we're going to just apply these same styles to this so let's see it's going to make the text small it's going to make this an inline Flex it's going to give it a border with a color of 222 and 10% opacity it's going to give it some padding left and right and top and bottom give it some border radius and pull in the letters a little bit with some letter spacing rules so all that will apply to this tag as well so if I save this let me go ahead and apply this first to my hero so I'm going to go ahead and delete all of this and add in the tag class and let's double check that that shows up correctly which it does now that I've done that let me ex out my hero come back to my product showcase and give it a class name of tag that way we don't have to continue to use the same Tailwind utilities and hope everything looks consistent we can just give it that consistent utility with the components layer that Tailwind allows us to use from there we can see that this tag actually needs to be centered on the page so let me go ahead and wrap this in another div and that div I'll go ahead and add a class name of flex to that will allow me to justify Center and that will Center my tag on the page my title and description are also centered so I can go ahead and add a class name of text Center to these and that will Center those up and now let's focus on the actual title Styles so this needs a class name of text 3XL for the 30 pixel tall font size we also want this to be a bold font using font bold we want the tracking to be tighter which is going to give it that -5% letter spacing and then we're going to want to add in that background gradient so we're going to do this the same way that we did our title up in the hero so we're going to say BG gradi radiant to bottom we going to say from black that's going to go to this custom 01 e80 color and then we're going to clip it to the text by saying text transparent and BG clip text and that should give it a background clip of text and hold it into the text it's not the easiest thing in the world to see but if we do zoom in a little bit hopefully we can see this a little bit more effectively let me bring this in a little bit and see if I can bring this to a higher zoom level but it's not the easiest thing in the world to see let me go ahead and see if I can create something like 200% zoom and see if we can actually see this more effectively okay so it's a lot easier to see there that this is indeed giving this the right linear gradient that we wanted to I'm going to bring this back down to 100% and bring this back over so we can get back into the code the only other inconsistency I'm seeing with this title is that we need a little bit of margin in between our title and our tag so let me go ahead and give this an empty five that should give it the 20 pixels margin top that it needs to give it that little bit of Separation so that's looking good let's move on to our description for our description we know the text already needs to be centered this one is a little bit different it has the text size of 22 pixels which is a custom tail1 CSS value we want a line height of 30 pixels using leting so letting 30 pixels we also want the tracking to be tight which is which is going to give it that letter spacing of - 2.5% and we have a custom uh text color of 01 0d 3E and that should give it that dark blue color it's very hard to see but it is definitely different than black we also want to give it mt5 and that should separate it from the title as well now that we've taken care of that let's move on to our image and it looks like the only thing that we really need to do with the image is separate it from the description so we just need to give it a little bit of margin tops I'm going to say mt10 to give it that 40 pixels of margin top and that looks like it's working as well as it can I think that wraps up the mobile view of this section it's looking really good let's get started on the tablet and desktop view and at least take a look and see if there's any changes that we need to make so as we go over to the tablet one of the things I can see is we definitely need some sort of container around my content to ensure that it doesn't get too wide and of course I already pointed out in the design that the text size needs to increase in order for it to be the right size so let's do those couple of things the first thing I'm going to do is add that container around our content and that's just going to be uh all around here we're going to have a div the class name is going to be empty for now just so we can get our everything in the right spot let me just go ahead and and save that and that should show that it's around our tag our H2 and our paragraph This content container is just going to have a Max width of 540 pixels and of course when we do that we want it to be centered so we just need to say MX Auto that should add margin left and right of Auto and ensure that our content is centered on the page the other thing that we want to be here when it switches to the table view is of course we want our decorative images to be on the left and right so what we're going to want to do is make those relative versus the image that we already have our product image in order to do that let's wrap our product image in a div give it a class name of relative and that should allow us to absolutely position the other images that we're going to bring onto the screen one of the images is going to be the pyramid image so I'm going to import my pyramid image from at/ assets SL pyramid.png and then I'm going to bring that in with next image image as well it's going to be over top of the product image which means it's going to come later in the Dom and I'm going to use next slash image to to show it as well so I'm going to have my pyramid image here my ALT is going to be pyamid image and my class name we know it's going to be absolute but I'm not sure exactly right off hand where it is going to go so I'll have to reference the design for that but let's just see where it shows up for now and it looks like based on the design that it is going to be from the right we're going to add a value of 144 pixels and from the top we're going to have a value of 128 pixels we also want to make sure that it's the right size so I'm going to add a height on this of 262 and uh same thing for the width although it should be Auto we can add that as well that should be two 62 as well the other image that we need to be here is the tube image so let's go ahead and add that as well we're import the tube image from assets tube. PNG and we'll bring that in here as well over top of our product image so I'm going to use once again next SL image we're going to give it a source of our tube image our alt is going to be tube image the height is going to be 248 pixels of course we're going to want this to be absolutely positioned so we need to give it a class name of absolute and then it we're also going to position it in the right position so it looks like that's going to be bottom 24 to give it 96 pixels from the bottom and then we're going to put some negative left positioning on it using negative left 36 to give it 144 pixels from the left as I take another look at our tablet view we can see that we haven't yet changed CH the title to be the right size either so let's go ahead back and ensure that we do change that title to be the right size here so when it switches to the medium size we want the title to be text 54 pixels and then we also want the line height or the leting to be our 60 pixels so that will look much better on the tablet view one of the things this browser is telling me is that I have some overflow on the left and right so if I scroll to the right I can see that I actually have my image it's taking up some space there and creating this gap on the right we never want that to happen so we need a way to clip that and that's going to be at our section level we can say overflow excuse me overflow xclip and that will ensure that anything that overflows to the X direction will be clipped and that I don't have that overflow problem anymore now that we've taken care of that let's look at our desktop view and see if there's anything else that we need to address in this section and I'm not seeing anything right off hand that we need to address everything looks right let me just pull it out a little bit more so that we can see the full design I'm going to go through mobile tablet and desktop using my horizontal view to ensure that nothing is broken in any of our views so what I can see as I look at this section is in Mobile we forgot to hide this tube and this pyramid image so on the tablet and desktop view it looks great but of course on mobile we have one more thing which is to make sure that those images are hidden on that side so I'm going to put this back all the way over I'm going to go ahead and focus on my mobile view let me pull this out and put it back into Focus mode and then I'm going to make sure that that's focused on the mobile view so I can make sure that this looks correct I'm going to scroll down and I'm actually going to come in here and say hidden on these two images so hidden we'll make them hidden and then when it when they get to the medium size or the tablet size then we're going to say block and that will pull them in and of course same thing here hidden and then medium block and that will ensure that they show up at the right screen size so as I go back to my tablet view we can see that they show up but when I go back to mobile they're not there anymore and that's exactly what we wanted okay this section responsive styles are done it's time to move on to our next section now that we finish up the product showcase that means we can move on to the pricing section and as I look at the pricing section what I'm seeing is we do have a title and in a description with the same styles that we used before so that'll be a great chance to use our utility classes I'm also seeing a couple of pricing cards and these are going to have some different styles we're going to have a regular pricing card it looks like we're going to have an inverse pric pring card and we're going to need to ensure to account for this popular tag that only exists on the inverse card so we'll make sure that we'll account for that correctly with our component that we'll create for these pricing cards as we move on to the tablet and the mobile view we can see that we stack those cards on top of each other because there's not enough room to show them left and right so that'll be pretty easy to do with flex box and of course at the smallest size we're going to have the smallest size title as well so we'll need to make sure and account for that there's not too much else to see with this part of the design so let's go ahead and hop into the code back in the code we're going to come into our pricing section by opening up our pricing. TSX file this does have our pricing tiers data already created for us so that we don't have to go through and create all that pricing data that'll come with the template when you download that uh that'll be in the the link will be in the description for that when we come down to the pricing section we're just going to go ahead and turn the word pricing here and of course in our app page. TSX we're going to import that pricing section and once we do that we can drop it into our list of sections so we have our pricing section and let's ensure that as we scroll down we do see the word pricing which of course we do which means that we're good to go back to pricing. TSX and dive it right in the first thing we're going to do is create our semantic section tag so that'll be section then we're going to have have div class name equals container for our container around our pricing and then of course we're going to have our pricing cards but before we do that we'll need to put our title and description for this section so it's going to be an H2 for the title we're going to have a paragraph for the description and for our title and description let's go ahead and add the content for those that says pricing here and then the description I'm going to copy that from the design it says free forever ever upgrade for unlimited tasks better security and exclusive features and we can scroll down and we can see that that is indeed there now the styles for these two are the same as the section above which means that we can once again use tailwins utility components to ensure that we don't need to write this CSS more than once so I'm going to go back up to my product showcase and I'm going to take these Styles and then we can easily trans transport them over and create a component out of them so I'm going to go ahead and do that I'm not going to add the margin itself CU I don't like to change spacing with these I just like to do the things that actually affect the interior of the component so I'm going to go ahead and cut those out of there bring it over into my global. CSS and I'm going to call this a section title and that's going to have my copied and pasted Styles here so that's going to make sure that we no not sure what happened there that's going to make sure that we have our text centered our text is going to be the right size at the medium breakpoint as well as a small breakpoint it's going to have bold font the letter spacing is going to be tighter the it's going to have the background gradient from black to this custom color and the text is of course going to be transparent and the background is going to be clipped to the text all those styles are going to be applied as soon as we apply our section title class name so I'm going to come back to my product showcase ensure we have our section title class name applied there and ensure that it still looks like it should which of course it does when we scroll down to our pricing section we can also do the same thing here we just need to bring that class name here as well so I'm going to say section D title and that's going to give me those Styles right out of the box which is great let's do the same thing with our section description come back to our product showcase go ahead and copy and paste or or cut I should say these Styles out of here except for the margin once again we're going to bring that into global. CSS create a new component called section description and with that component we're of course going to apply the styles that we just copied so that's going to be text center it's going to set the text to the right size make sure that the letter spacing is correct and make it the right color and that's all going to be encapsulated in the section description component so let's save that global. CSS file come back to our product showcase add in our section description deson component ensure that that looks correct up here which of course it does and then once again come back to pricing and say class name equals section description now that was a little bit of work but it saved us a lot of effort and of course if these descriptions change we can update those all in one place that's going to be at our global. CSS file instead of updating it five or six times for the different sections that we're creating so I'm going to close this out I'm also going to close the previous product showcase out and we'll once again focus on our pricing now I'm noticing that our padding is not yet correct of course it's bumping up against the bottom of the page and the top or the bottom of the last section so we need to add some styles for that that's going to have a class name added on our section tag and that's going to be py 24 that's going to give us the 96 pixels of padding top and bottom that we need we also need to ensure that our title and description are split appropriately and this is actually a great example of why we don't add our margin to the section title component that we created and that's because we would have added unnecessary margin here we don't have anything to change here so here we needed to have that margin to to push it away from the tag but as we move down to this section we don't need that margin on the top anymore which is great that we didn't include this in our component layer so because we didn't do that of course we can add our margin where we need it and this at at the description level is where we need it we'll say mt5 here and that will add the margin there now that we've done that let's go ahead and start creating our cards our pricing cards and let's go ahead and wrap those in another div so I'm going to wrap those in a div and this div right here that I'm creating is going to be the actual pricing card itself now we want to add the content first and then we'll go into the different styles that we'll need to add to this so we'll need to add a title onto this card that's going to be right here we'll go ahead and make it an H3 so that we can try and use semantic tags and what we should probably do here is go ahead and map over our pricing tiers that we have here so that we're using the correct data points so let me go ahead and add right here I'll say pricing tiers. map and then we can map over each of our tiers and add the data points correctly so I'm going to go ahead and create that and we're going to Output this which is going to be our pricing card now inside of this mapped value that's where we get each object itself so we'll have if we scroll up we can see that we'll have a title we'll have a monthly price button text popular inverse and features all six of those will be available to us here so we can just go and pull those out with title monthly price we can see we'll have a button text we'll have popular to indicate whether it's popular or not we'll have inverse to indicate whether the card is inverse or not and then we'll have our features array now the title will go inside of our H3 so let's go ahead and put that title there and scroll down to see if we have that okay we do have that the next part is going to be our price itself so let's go ahead and add a div wrapper for that price and then inside there we'll want a couple of span tags one for the price because it's going to have different styles than the per month which is going to stay static so the price itself is going to be our monthly price and that is O I did forgot to put my other bracket monthly price and that is going to be where we see our 09 and 19 of course we're going to need the dollar sign before that so we'll go ahead and put that dollar sign there and that's going to make sure that that is there like it should be below that we'll have a button so that button is going to have whatever button text is indicated inside of our object so we'll go ahead and put that there and we can see that that button at gets added correctly and then below that we have our features so this is going to be probably a UL is going to be the best semantic tag for this so ul and then we'll go through our features so we'll do a features. map and for each of those features which is just a string we're going to go ahead and output something and that's going to be an Li and that'll be our actual feature itself that is looking good I'm seeing all the content that we need on the page a couple of other things that we need to look at is of course we're going to need to handle these popular inverse but we'll worry about that after we get the first card created so we can then modify that and make the inverse and popular cards we also need to ensure that we have the feature check boox or the check mark here that icon we can import that by going ahead and wrapping our feature in a span tag or feature text I should say and then once we do that we can go ahead and put the icon right here so I'm going to go to the top of the file and I'm going to import the check icon and that's going to be from assets check.svg that will ensure that we get that as a component and then when we scroll back down we can just go ahead and say check icon and that should make that check icon show up now of course it's going to be too big so we need to go ahead and add a class name of H6 to give it 24 pixels of height and then W6 should give it the 24 pixels width and that should bring that right back down now I know right now it looks like someone just puked content all over our page and that's fine let's go ahead and start adding our styles to make these cards look like they should the first thing we're going to start with is the actual wrapper itself and that's going to have a class name of P10 that's going to give it 40 pixels of padding we're also going to want to make sure that it has its uh border radius and that's going to be rounded 3XL it's also going to have a shadow so that's going to be Shadow but it's going to be custom so it's going to be zero and then 7 pixels of Y value 14 pixels of blur and that's it's going to be a custom color of EA EA EA that should create the correct Shadow the only other thing I'm seeing here is we also need a border so let's make sure that we have the Border there and that border for the first card is going to be F1 F1 F1 so let me go ahead and add that color the custom border color of F1 F1 F1 and that should make it the right color now both the border and the shadow are very light so it is difficult to see those but they are indeed there so then that means we can move on to the content of the card for our title we're going to want to add a class name here as well and it's going to be text large and font bold and that's going to ensure that it shows up as it should and it's also going to be the color text black sl50 for 50% opacity and black for the price we'll go ahead and add a class name to that as well and that's going to be text 4XL let's see how that looks of course the font should be bold the letter spacing should be tighter or tracking Tighter and we won't want to have any leting added from or sorry excuse me line height added from our text 4XL we're actually going to want this just to be our 36 pixels so I'm going to say letting none and that should take away that little bit of extra line height that's added automatically by our text for Exel class for the description are per month we're going to add a class name to that as well and that's going to be tracking tight to get the letter spacing down we're also going to have font bold for that as well and that's going to be text black 50 for our black with 50% opacity as well now we're going to want to flex these just so we have more control over the spacing between them and that means that we're going to need to add a class to our wrapping div so let's get add a class name here and that's going to be Flex we're going to make sure that the items are lined Baseline which is a weird one but not one that we can't use so we have that capability for us and we also want to make sure that our Gap is four pixels between the two money and per month items and that we have the right amount of margin so it looks like it's going to be about 30 pixels that's going to be a custom value of 30 pixels now that we're done with that let's scroll down and work on our button so our button we already have some component class names for this so let me try and add those on first and then we'll adjust from there so we have button primary that should make it the black one but of course we want this one to be full width so we can add on to that by just saying width full and that should allow our button to be across the entirety of that card the other thing we need to do with our button is of course make sure that it has the proper amount of margin and that's accomplished just by saying Mt 30 pixels and that should give it 30 pixels of margin to the top as well for our unordered list we can go ahead and come down and add a class on that as well we're going to flex that in the column Direction so Flex call we're going to give that a gap of five and we also want the margin on top of that to be 32 pixels and if we save that we can see that that is correct now we just need to add a class name to our list item as well and the class name there should be text small to make the font a little bit smaller we're going to flex those left and right we're going to align the items to the center and we're going to split the text and the check mark by 16 pixels with gap 4 so as we look at what we've created so far this is looking really good yes we have had a to create a lot of classes and add those to make these pricing cards look good but the pricing cards are looking really good the only thing that I'm seeing now is that of course our pricing cards aren't separated at all it's kind of hard to see because we don't have the inverse one called out yet and of course we need to take care of our inverse and popular props as well so let's go ahead and take care of a couple of those things now and that should allow us to wrap up these pricing cards so the next thing I'm going to look at is our our popular tag and we want to add that beside the title but only if we have this popular prop set to true so I'm going to wrap this I'm going to pretend for a second that it's always true so wrap this in a div and add a class name of flex and justify between because of course we're going to want that to the popular tag to go to the other side of the page and then here I'm going to go ahead and add a div for that tag in that is going to say popular and of course we're going to want to add some classes to that to style that up now this tag isn't going to be close enough to our other tags to use the tag component utility that we've already created so let's go ahead and manually style this this is going to be inline Flex it's going to be text small to make sure that the text is the right size we're going to give this a padding left and right of 16 pixels with PX4 a padding top and bottom of six pixels with py 1.5 we also want this to be rounded XL which is going to give it a border radius of 12 pixels and we of course want a border to be there so let's go ahead and create a border as well now that border is actually going to be because it's going to be on an inverse card that border is going to be white so that border is going to be border white /20 and that'll create a white border with 20% opacity so we're not even going to see that border until we add the inverse class names onto the card itself now to make sure that the rainbow effect is added onto the text this is where we're going to add a span tag here and that's going to ensure that we can create that rainbow effect that class is going to look like this we're going to use the same text clipping or background clipping rules that we've used on our other text but this one's going to be a lot more pronounced because of course it's going to be rainbow colors so let's go ahead and add that background so back ground and it's going to be custom linear gradient and that's going to go to right and that's going to have a few different colors so the first one is going to be dd7 DDF the second one is going to be E1 C d86 third is going to be our BB cb92 the fourth one is going to be 71 C2 EF the fifth is going to be 3 B FF FF and we're going to end with the same one we started with which is our dd7 DDF so let's see if that looks correct and it does I am seeing that rainbow gradient as soon as I save so of course now we just need to to finish this out with the rest of the effect which is of course to say that our text is transparent and that our background ground is clipped to our text the font itself just needs to be a little bit Bolder as well and that is done with the font medium class name now it is difficult to see and that's because we don't have our inverse card yet so let's go ahead and handle this inverse prop as well after we go ahead and I I forgot that we will need to go ahead and handle this popular prop this isn't always going to happen this is only going to be here when this popular prop is set the true so all we need to do is have a popular check so we'll say popular and and and then that's when we show this div right here we actually don't need to change any of our other styles because this Flex isn't going to matter if there's nothing to justify between it'll still keep everything to the left so you can see as we scroll up our when we don't have that popular tag there it's not going to affect this text over here the only thing we're going to do is we're going to add this when the popular is set to true and to make sure that this is set to true we can also just go ahead and triple equals true and that will ensure that it's actually just set to true now in order to handle our inverse prop what we're going to want to do is essentially change the outer class names that we're using right here on our wrapping card and so instead of having a background color of white or transparent that we can change it to a background color anti bordercolor of black so let's go ahead and show you how that is done and what I'm going to do is I'm I'm going to use a utility called Tailwind merge so let's bring that in we're going to import tww merge and that's going to be from Tailwind Dash merge now what that does is it ensures that these class names don't conflict when we have things that might conflict with each other is just going to take the last one that we've defined what I mean by that is if we were to say something like border black here you can see that it's going to tell me hey these two are conflicting so these are going to apply the same properties to each other we don't want that to happen so Tailwind merge ensures that if we Define this after we've already defined this that it's going to ensure that we only take the second one that we've defined so in order to use that let's go ahead and remove our border block because it's not actually what we intended to do and then for our class name we're going to we're just going to say tww merge and we're going to keep the first ones that are there but then we're going to also say that if we have the inverse set to true then we're going to add some additional classes so I'm going to do is I'm going to put a comma here I'm going to say inverse equals true and then we're going to add some additional classes on here so this one is going to say border is going to be black and also the background is going to be black and the text is going to be white sl60 by default now that doesn't look quite right it looks like our text should actually just be white by default my bad so let me change that back and we can see that that overall looks really good there's a couple of things that aren't showing up though the button we need to change that around we also need to change the text up here so that it shows uh as the right color and that I think will be about it for our inverse card so for this title we can do the same thing we just did on our wrapping div by going ahead and giving this a different color when it's inverse so we're going to use the same tail and merge we're going to say tww merge and wrap our entire class name and then we're going to say the same thing we're just going to add a comma we're going to say if a inverse is equal to true then we're also going to add in a text a string with text white 60 and that will add in that title like we needed now coming down to our button we can do the exact same thing we just did let's go ahead and add in our tww merge again and let's say inverse equals true and then we'll add in uh BG white text black and I believe that should ensure that we have the right Styles applied and of course it looks like it does so after we save we can see that our inverse one is looking great ites it's doing exactly what we want while our light ones are taking the styles that they need to as well so we're seeing really great pricing cards showing up on mobile right now we're not seeing any spacing between these cards right now I know once again it's hard to see because the border and the shadow are so light but we're not seeing any spacing between these cards so we need to add that in as well and that's just going to be the wrapper around the different pricing tiers this going to be this one we're going to say class name and that's going to be flex and of course we're going to be Flex that in the column Direction and then we're also going to want to say that we need a gap there as well that's going to be Gap six for 24 pixel of Gap we want the items themselves to be centered so let's say items Center and that's going to make these probably a little too small so the pricing cards themselves should be should have a width of 100% but a Max width of I believe it's about 320 pixels so let's go ahead and add that in as well so I'm going to say Max width I believe it's small no that's 384 that should be extra small that'll give us the 320 that we wanted and width is going to be full that should push out the pricing cards to the size that we actually want them to be in the design after that we just need to Ure that we have spacing between the Cards themselves and the description and that's going to be in our wrapping Flex call we just need to say mt10 and that should give us the 40 pixels of spacing between our cards and the description on mobile this is looking perfect but let's see how we need to change this on on tablet to make sure that we have our responsive Styles in line so if I look on tablet we have the same problem that we had before with our description taking up too much space so it seems like we might need to go ahead and make a separate component utility just for that wrapper that's should hold in the title and the description so let me go back to my product showcase and let me see what styles we've applied there it looks like these are the styles that are applied that wrap our content or at least our title in our description to ensure that it's not taking up too much space we need to apply the same thing here so let me go ahead just copy and paste this into our global. CSS once again inside global. CSS we'll say uh section heading maybe that'll be the class that we can use the component class and we'll apply the rules that we just cut from our div we'll save that now when we go back to our product showcase we should be able to say section heading here and that should keep that wrapped the way that we want we can close those two out and come back to our pricing and then wrap this in a div that class name is of course going to be section heading and that will ensure that we have the space wrapper that we need to ensure that it's not going to take up too much space to the left and right the other thing that I really love about what our tablet view is doing right now is of course it's automatically respons responsive using our section title and section description helpers that we already had in place so we don't have to worry about changing this title because we already made sure that we took care of that with our component helper that we defined in our global. CSS now we know that in the tablet view these should still be stacked so all of that still looks right to me let's see what it looks like on the desktop view over on the desktop view we know that the should no longer be stacked so that means that we need to come here and we need to apply a couple of large styles to say what should happen on the desktop view so the first one should be when it gets to the large size these should be Flex row instead of call so that should ensure that they're lined up left to right but now they're lined up centered and of course we want that to be on the bottom so we need to say large and we need to set the Align items to end and that should ensure that they're lined up smallest to tallest we also want to make sure that they're centered on the screen it's probably a little bit hard to see we'll say large justify Center and that will ensure that they're centered on the screen it's just a little bit of a shift but certainly something that we want for a Pixel Perfect Design let's zoom in a little bit and make sure that we look at all of our break points at once using our horizontal view so I'm going to go first on over to mobile we'll scoll scroll through that and scroll down to our pricing section can see that's looking beautiful scroll all the way down we can see that that's all looking great and if we go over to desktop we can see that even in full size this is looking exactly as it should so right now we have a Pixel Perfect responsive pricing section which means it's time to move on to the next section coming back into our design now that we've done with the pricing section let's look at what we're going to be creating for testimonials we can see that we have a tag title and description very similar to what we've already created and then we have a bunch of testimonials as well now they're very similar we can create some components or at least map over some data so that we can show all of these the way that we want to on the desktop side we're seeing that there are nine showing at a time on the tablet view we're seeing six and of course on the mobile we're seeing three so nothing too crazy there but we will account for all of those different responsive views and without further Ado let's dive into the code back in our code let's go to our testimonials section which is located under sections testimonials now what you'll notice is that we' already have our avatars imported and we already have our testimonials array each testimonial contains some text an image source a name and a user name so we'll use this array of data in order to create our testimonials now to make sure everything is hooked up correctly we want to replace null with a string and we're going to call that [Music] testimonials and then we're going to go into our app page. TSX and like the other sections we're going to import this one so we'll import testimonials from / sections testimonials and then we'll drop that into our page p as a testimonials component now if we scroll down we should see the word testimonials which we do everything is hooked up correctly which means we can dive into our testimonials section now to start out with like the other sections we'll go ahead and create a semantic section tag that section tag will hold a div with a class name of container because of course we don't want any of our content bumping up against the edges of the screen and then inside that container we know that we're going to have a title so we can name that testimonials if I could spell we also are going to have a description so we'll add that here or I apologize this isn't testimonials this is what our users say so we'll go ahead and make sure that that text is updated from the design and then the description I'm going to go ahead and also copy that from the design that's going to be from intuitive design to powerful features our app has become an essential tool for users around the world so we'll go ahead and copy that and we also have a tag and that's where the testimonials comes in and we'll go ahead and put that testimonials text above there so we already do have a few different class utility classes that we can use for this we know about those so let's goe and drop those in the first class name that we're going to add to here is Tag that should make that styled as a tag this is going to have a class name of section title this paragraph is going to have a class name of section description and that should at least allow us to have some basic Styles and then we just need to make sure that our spacing in between and of course our alignment is correct so I'm going to wrap the tag in another div with a class name of flex and justify Center that should make sure that it is centered on the page and then for our title and description we need to make sure that those have a margin top of 20 pixels each so mt5 and mt5 should give those the spacing that they need to make sure that they are spaced appropriately from there let's work on our classes for our section so our section is going to have a class name of BG white to ensure that the background is completely white and we're also going to make sure that we don't have any padding on the top or bottom of this one so that's going to be py0 now we don't necessarily have to add that in so I'm just going to go ahead and remove that and just have leave it as the BG white now this is actually helping me understand why my Styles looked the way they did on my last section and it's because I forgot to put background white on my pricing section that is actually made it a light blue so I'm going to go back to my pricing section and I'm going to also add that BG white here and that's going to help me uh make sure that my Styles look correct so that looks much better the cards stand out much better as well very happy with the change that that makes uh but let's get back to our testimonials close out my pricing and of course close out my page because we don't need that right now for testimonials we want to split these into three columns and the best way I can think to do that is to go ahead and do different slices of these so in my first column I can say con's First Column and that's just going to be the first three of these so I'm going to use testimonials which is an array and arrays have a slice function that you can use and that SCE function is going to allow us to take from zero to the third index it's going to be the first three my second column is going to be the testimonials. slice again but this time it's going to be from 3 to six and then my third one is going to be const third column and that's going to be testimonials. slice and that's going to be 6 through 9 and as we can see in case you've never seen this slice function before it basic basically returns a copy of the array from a start and end index and just returns those items so I'm only returning the first three the second three and the third three uh with my different columns now for the mobile view all I really need to show is my first three so this makes it really easy I'm just going to go ahead and come down here and create a div to wrap these and then I'm going to say for My First Column I'm just going to go ahead and map over those and that should give me my testimonial and then for each one of those I want to of course show some sort of a div here as well and that's going to include my content for each testimonial now we can pull out the content Keys themselves and those are going to be text image source our name and our username and that's going to allow us to make sure that we have those now from my design I can actually see that the testimonial cards and the pricing cards are very similar which means once again we could create a Tailwind utility class to allow us to encapsulate those in one spot so I'm going to go back to my pricing section and I'm going to take that outer wrapper of the card and see if I can encapsulate some of these same Styles in my new card utility class so let me copy these let me go over to global. CSS and let me create a card class that card class is going to apply the styles that we just had here so we're going to apply the same amount of padding the same border I don't think I need this border solid rule by the way uh a border 22210 uh border radius it'll apply the same Shadow apply the same Max width and the same width so all those rules we actually want in our card utility class I'm going to save that come back to pricing and make sure that we just replace this with a simple class of card and then we also have the inverse here which adds some additional classes on since we're not creating any more inverse classes I don't think we need another utility class for this I think we can just leave this alone and let this be what it is with that in place let's go back to our testimonials and for each item in the First Column let's go ahead and add the class name of card and that should allow us to at least have some starter Styles in order to create each of our testimonials and those are looking perfect those are looking great inside each of those cards we also want to have our content so we're going to create a div and that content is going to have the text so the text is going to go right there and then below the text is going to go the avatars of course the names and the usernames so we're going to have a div that's going to surround both of those or all three of those I should say and then on the left left is going to be the image itself so let's see if we can use next SL image for that we're going to have a source of image source an ALT tag is going to be kind of hard but let's see if we can just use their name for that so let's see alt equals name and the height and width are both going to be 40 pixels if I'm not mistaken so that means we need to add a class name here of h10 with 10 and of course rounded full to ensure that we have full rounding uh full border radius that we need around that image after I add the ending tag we can just save that it looks like we have a problem somewhere and it's because we used a string source that the image can't automatically pull in the width so we need to go ahead and say width equals 40 and that should allow the width to get to the image correctly and of course the height is also going to be 40 once we've done that we can see that next image does display the image correctly so beside the image we want to go ahead and have another wrapping div and that div is going to have both the name and the username so let me go ahead and add a div for the name and let me end that and then we're also going to have a div for the username and we're going to have an ending div there now let's see if we can style these appropriately so we need to have a class name of FL Flex that's going to ensure that what we can do is flex these in the column direction we also want to have a flex class name on the wrapping div around the image and the name and username so we'll say Flex there and of course that's going to be in the row direction we want to align the items to the center so items Center is going to be what we're going to add there we want a gap of eight pixels so we can say Gap two and we want the margin between that and the text above it to be 20 pixels so we can use mt5 as the class there now we just need to add a couple more classes to the name and username so let's go ahead and do that the class name for the name needs to have font medium to make that a little Bolder than the regular it also needs to have tracking tight to give that letter spacing that it needs and we want the leting to be set specifically the 20 pixels that just makes the name and the username the same because we're going to add a class name of letting five on this as well and tracking tight now that we've done that we can see that our testimonial cards are looking great but of course they don't have any spacing in between them yet and and it also doesn't have any spacing up here on the top so both of those need added in in order to do that we'll just go ahead and flex our column wrapper so we're going to say class name equals Flex Flex call and that's going to flex that in the column Direction and then there is where we're going to add our Gap so that's going to be a gap of 24 pixels and that's going to split those testimonials apart and then we can also ensure that we have the right margin on the top by saying mt10 that should add the margin to the top so now our mobile testimonial section is looking pretty good the one thing I'm noticing there's a couple things that I'm noticing and one of them is that we don't yet have our mask over the top that's going to fade out the testimonials at the top and the bottom we go we need to go ahead and add that in there and then the second thing is there's no padding on the bottom yet and we might not need that but let me go ahead and make sure via the design that we don't so let's go ahead and take care of the first problem the first problem is that we don't have the white Fade Out and fade in and that we can take care of by adding a mask on our Flex column so I'm going to add a mask image rule here and we're going to say linear gradient and that's going to be to the bottom it's going to go from transparent to Black and then two transparent or excuse me black again and then transparent because we're going to set where our actual cut offs are for each of those uh percentages so this is going to be black 25% this is going to be black 75% and then we're going to going to have back to transparent again so let's see if that actually adds the correct mask on there and indeed it does we can see that the top one is starting to fade out we have a testimonial at showing and then the bottom one is fading out again that's exactly the effect we were trying to achieve and like I said you can still copy and paste through this this is a great way to add masks to have things Fade Out on the screen now that our testimonial section is looking good in mobile let's ensure that our responsive styles are correct as well so let's go over to the tablet View and see what's going on with our testimonials now the first thing I'm seeing is that we're not aligning these testimonials to the center so even though there's one column right now when there's two columns we still want those aligned towards the center so we need to ensure that we have the proper wrappers there so I'm going to add a div with a class name of flex and that's going to be the wrapper that we use to control how these are aligned so we'll say justify Center and that will ensure that our testimonials how many other columns we have that are they are aligned towards the center and of course if we have more than one we're going to want to put a gap between those as well so we'll say Gap six here that should ensure that we have if we have more than one we can do that properly now we could copy and paste this whole thing and put it down here like so and then save that and we'd have two columns however that's a lot of duplicated code and anytime in react that you have duplicated code you normally want to break it out either into the utility component classes that we've already created but this is a bit more than a class this should really be a true react component so what I'm going to do is I'm going to undo what I just did with my code and I'm going to instead of copying and pasting this three times for three columns I'm going to actually create a component with this and in order to do that I'm just going to cut that out and I'm going to come above my testimonials uh page component and I'm going to create a new testimonials I'll call it a testimonials column and that's going to take some props which right now are unknown and it's going to return a testimonials column now of course we're going to dynamically set what those testimonials are so inside of props we're going to take in a testimonials or excuse me we'll just go ahead and call this props for now because that's going to help us with typescript and we're just going to say that it's going to say [Music] testimonials and that's going to be type of testimonials and that essentially is saying that this props is going to include a testimonials prop and that's going to have a type of the array that we're passing in right here so essentially it's going to have an array that looks like this just so typescript is Happ happy when we grab that we just need to call this props do testimonials. map and that will essentially make sure that we can pass in our testimonials like we want to now when I save this our testimonials are going to disappear but that's fine we know how to get them back we just need to pass our testimonials that we want into each of these columns and include these columns inside of our flexed container so we'll have testimonials column here and it's going to include a testimonials prop of First Column and let's make sure that that column shows up correctly and it does which is encouraging so let's go ahead and do that for the second column as well second column and let's see if we get two columns and indeed we do so that's really helpful they're also pushed towards the center because of course we went ahead and used this Flex container to do that so that's looking pretty good on tablet the problem though is that when we go back to mobile we're also going to see both columns so that's not what we want we actually want to hide those until we get to the desk or excuse me to the tablet size and that just means we need to also pass a class name prop so that we can modify what is shown and what is hidden at each particular screen size so I need to go ahead and also add a class name prop here that class name prop is going to be a string and it doesn't have to be there that's why I put the question mark there so it can be a string or defined and we're going to use our same Tailwind merge function to ensure that if it is there we're going to merge it with the classes that we already have so I'm going to go ahead and use that that's going to be right here and we're going to pass in class name so essentially it's going to take this class name prop and it's going to pass it into this Tailwind merge function of course I have to include Tailwind merge so let me go ahead and just hit enter there that should include Tailwind merge and this should also be called props do class name not just just class name because we haven't destructured that object so let me go ahead and scroll back down to our testimonials and ensure okay we do have a class name and we can pass that through so now my second column I only want to show up at the medium screen size so now I can pass that a class name prop and say that it is hidden by default but when it gets to medium then we're going to go ahead and display that as Flex so when I go back to my mobile size we can see that that shows up properly it's only showing up with one column in my tablet size we can see that it shows up with two columns so that's showing up exactly as we want it to and of course to continue the same idea when we get to desktop we want to show the third column as well so let's go ahead and create another testimonials column we'll pass in the third column of testimonials and we're going to say at large we're going to show that as Flex instead of medium so it's not going to show up on the tablet but it will show up on the desktop size the the only thing that I'm seeing that seems to be out of whack is that we don't yet have our content container around our title and description and of course our tag we can put it around there too so I'm going to go ahead and create another div it's going to be our wrapper around our tag our title and our description and we're going to use that same utility class that we created earlier for this it's just going to have a class name of section header and that should create the container around there let me save that and make sure that that does indeed take effect and excuse me it looks like that was called section heading not section header so that was why that wasn't taking effect but that looks like it's fixed now and we're back in business as another check let me go ahead and pull out my view here and ensure that everything looks the way that it should on the big screen so let me go ahead and change this to a horizontal view like we've done before and then we'll look at all of the views at once and ensure that we have the styles that we're looking for so on mobile looks amazing on tablet I'm seeing it still looking great and as I scroll over to my desktop view everything is still looking as it should so this looks really good the responsive styles are completely done and we are moving on to the next section now that our testimonials responsive section is done let's move on to the next section which is our call to action so this section is pretty simple it has a title a description a couple of buttons I I think we have most of the styles that we're going to need already as utility classes in order to create this and of course we see that there are a couple of images that are to the left and right of our desktop and our tablet view on mobile we're not seeing those same things so we're just going to have to go ahead and create our mobile view like this and then we can add the images in as we get to our tablet and our desktop view once we get to the effects part this is going to be a lot of fun because we're going to add some Parallax animations to these images but for right now let's go ahead and dive into the code back in our code let's go into sections and we're going to open up call to action here we're going to put the string call to action just to double check everything is working we're going to bring this into our page. TSX file by importing call to action from at/ sections call to action and of course we're going to put our call to action component at the bottom of our homepage if everything's correct as it looks like it is then we have have the call to action at the bottom of the page so that means we can go back into our call to action component and get started on our code in order to create this we'll start with the semanic section tag like we have the other times we'll also give this a div class name equals container to ensure that our container is wrapping our content in this section we want an H2 for the section title that is going to have the content of sign up for free today we also want to have a paragraph here I'm going to copy and paste this from the design it says celebrate the joy of accomplishments with an app designed to track your progress and motivate your efforts we don't want that extra space there so we'll take that out and we're also going to have a couple of buttons so we'll have a div around these buttons and we're going to have a button one that says get for free and a second button which says learn more we don't want that M Tob capital I so I'm going to go ahead and take that away okay now that we have the content we can go ahead and start to create some of the styles to make this section look as it should in the mobile view the first thing I'm going to start with is the section tag itself so I'm going to add a class name to this and going to say it has a background gradient so I'm going to say BG gradient to the bottom and it's going to start from White and it's going to go to the custom value of D2 DC FF and that will create the gradient that we're looking for and that blends it with the section above it we also want to add a little bit of padding so this section is going to have uh py 24 that will add the padding top and bottom that we need there now that we've done that we need to ensure that our content has the right class names so we're going to come into our H2 and say class name equals section title that should give that the class name that it needs we're going to also say class name on this paragraph is section description that should be what that needs and then down with our buttons we're going to give these classes as well so class name equals BTN BTN primary and this other one is going to be class name equals BTN BTN D text and that should take care of most of the styles for that now we just have a couple of spacing issues that we already knew we were going to encounter so we need to go ahead and flex our buttons together so class name equals Flex that will allow us to control the gap which is of course 8 pixels so I'm going to go ahead and do that we're also going to put some margin on this so mt10 should give us our 40 pixels of margin that we needed there and we're going to justify these buttons to the center to ensure that they align to the center of our section we just need a couple more things to tighten this up one of those is making sure that our description is split from our title so that's just going to have the mt5 class and that's going to ensure that our description is aligned appropriately now that was really quick but in that short amount of time because of our utility classes we were able to easily get this section created now let's go ahead and look at our responsive views and see what else we're going to have to add in order to make this work but before I do that one more thing I forgot about Which is my my arrow next to my learn more button it's in the design but we don't currently have it in the code so let's go ahead and import that arrow and we'll put that by our learn more button so let me go ahead and import the arrow from at asset arrow right.svg and then we're going to wrap learn more in a span tag just to be able to control the text itself and then we're going to add our Arrow right next to it and then Arrow right is going to have a class name it's 20 pixels x 20 pixels so H5 width five that will make sure it's the right size and then we just need to add a little Gap in between the text and the arrow itself now that we've taken care of that problem now we can go over to our tablet view so I'm going to click on tablet and let's see what we're looking at in our tablet view I'm going to make it a little B bigger so that we can see it a little better the first thing I'm noticing is that once again the text is going too wide we need to constrain that somehow so I'm going to go ahead and add that div that wrapper div around our H2 and our paragraph our title and our description and give that a class name of section heading I believe is the one that we need that should allow us to make sure that it is constrained appropriately the other thing that we need to do is ensure that our images are lined up correctly as well so we need to import the images that we need for the left and right so I'm going to import my star image and that's going to come from SL assets slst star and I'm also going to import my spring image and that's going to come from assets SLS spring.png I also need to bring in my next SL image I'm going to import image from next SL image that will allow me to place these where I need to now these are going to be relative to the section heading itself so I'm going to put a relative class right here and then I'm going to put these absolute images inside of this same container so I'm going to say image source equals I'm going to start with the star image I'm going to give this an ALT tag of star image it's going to have a width of 360 pixels and then for the class name we're going to modify that in a second but I'm just going to go ahead and get this on the page we know that it's going to be absolute right now it's just showing up below the con content itself so let's let me go ahead and give that absolute and that will allow us to go ahead and move that around where we need to now looks like from the left corner or the left side of our content it's going to go 350 pixels to the left so I'm going to say negative left 350 pixels that's a custom value and then from the top it's going to go 137 pixels up so negative top 137 pixels should do the trick let me ensure that that goes the right direction it looks like it does and also I want to ensure that it's not going to overflow this container to the left or the right so I'm going to go ahead on this section and say that if we have overflow we're going to overflow X clip to ensure that we don't have any kind of unnecessary overflow now that we've done that let's put in our second image so this one is image source equals spring image it's going to have an ALT of spring image image it's going to have a width of 360 just like the last one and the class name is going to be very similar it's going to be absolute and then we'll look at the design to see where we actually need to stick this spring image and it looks like from the right we're sticking this 331 pixels from the right side and then from the top we're bringing it up 19 pixels from the top so far this is looking great once again our utility classes are helping us by already fixing our title size for us so let's go ahead and see how this looks on desktop by just clicking our desktop tab here we're going to stretch this out just a bit more so that we can zoom in on this desktop view and we can see how everything looks and right now from what I see it looks really good so I'm happy with how this desktop view looks let's look at this in our horizontal view with seeing all three views together and see if there's anything we've left out let me scroll all the way down and as I look through the different views it looks like it's looking good so I don't have any complaints about how this is looking right now I think we've done a great job with our responsive views which means that now it's time to move on to the last section of the page which is the footer now that we've come this far the last part that we need to design or create is going to be the footer so it's a pretty simple footer we have a logo we have a couple of nav items and then we have some social icons and a copyright section so that's pretty simple and as we move into our tablet view that looks essentially the same and on mobile looks like we Flex our nav items to the column Direction instead of the row so all of that should be pretty simple to execute on let's go ahead over to the code and let's get started as with our other sections on the page let's go ahead and open up the sections folder and dive into the footer. TSX file we're going to return the string of footer from this component and then we're going to go into app page. TSX and make sure we import that footer component from at/ section footer and then drop that footer into the bottom of our page if we've done that correctly we should notice the text of footer in our browser which we do which means that we can come back into our footer component and go ahead and start creating the code the first thing we're going to create is the semantic footer tag and then inside that we're of course going to want a class of container to contain our content for our content we're going to want the logo at the top so I'm going to import that logo I'm going to import the logo from SL assets SL logos s.png and then I'm going to just go ahead and bring that in with next image if I start using it and select the right one hit enter and then go ahead and use that then that will automatically import for my IDE and then going the source is going to be logo the height is going to be 40 the alt tag is going to be SAS logo and that should allow that to load on the page after that we have our navigation so let me go ahead and create a semantic nav tag and then I'm going to create six uh different links and those different links I'm going to add the correct text to after I've copied and pasted those so we have about we have under that features then customers pricing help and careers let's scroll down and make sure that those are showing up and they are which means that we can move down to our social icons now since these icons are svgs it's easy enough for for us to go ahead and import those as SVG so I'm going to go ahead and import my social X icon from @/ assets SL social X I'm going to do the same thing with my other icon so we've got our social insta from assets ssocial insta same thing for my social [Music] LinkedIn from at/ assets social [Music] LinkedIn also importing my social pin from @/ asseto pin and then we have last but not least social YouTube and that's coming from @/ assets slso YouTube so those are the social icons that I need I'm going to go ahead and wrap those in a div so that we can make sure that we can control the spacing of those and then I'm going to use some browser niceties to copy and paste the names of these into this location and then I can also use those same niceties to make sure that those are each their own component let's ensure that they're showing up on the page and indeed they are which means that we can move down to our copyright paragraph and that paragraph is just going to say copyri 20124 your company Inc All rights Reserve D that does it for our content which means it's time to add the styles with our Tailwind utilities so I'm going to start with the wrapper itself we know that we're going to have a background of black so I'll start there and our text is going to be a custom color of BC BC BC it's also going to be text small by default and we also know that we need a little bit of padding top and bottom that's going to come in with py10 to give that 40 pixels of padding top and 40 pixels of padding bottom we can also go ahead and add a text Center rule here hopefully that should allow everything to align to the center automatically and just make it a little bit easier as we move down the page the next thing we can do is go ahead and adjust our image now our image shows up because it has a background gradient with a blur and I want to make sure that that's included the easiest way to go about this is going to be to go ahead and wrap this image in a uh container and that container is going to be inline flexed that's going to be a container that then just wraps right around the image and then we can set this container to relative which will allow us to put anything in that as position absolute now we don't have to create another div behind here although we certainly could we can just use something as simple as a before element so I'm going to say before and I'm going to set the content of that to just an empty string and that's going to allow that before element to sh show up and then we can start modifying it with our Tailwind CSS rules so we can say before that the height is going to be full we can also say that the width is going to be full and that the background color is for now I'm just going to say red 500 to see if it shows up and of course we'll need to position that absolute once we do all that and save it we do see that it is showing up which means that our before element is on the page which is what we needed to know now that we've done that let's go ahead and come back and go ahead and give this a custom linear gradient so I'm going to say linear gradient here and we're going to say that that gradient goes to the right and it's going to go from f87 BFF it's going to pass through FB 92 CF through ffdd 99bb also through C2 F0 B1 and then last but not least 2 FD 8 Fe and let's save that and see if that shows up correctly it does which means that we can put this behind our image very simply by just going to our image and going ahead and giving that a class name of relative now of course this does have a blur and it doesn't take up the whole size of the container so instead of saying height full and width full which isn't actually true we can just go ahead and give this some different values so let's say before top two and before bottom zero and that should allow it to be aligned in the right position and then we also want this to be blurred so let's go ahead and give this a before blur and that should give it that eight pixels of blur that we need in order to show the entire logo now that we've gotten that taken care of let's move on to the navigation so in the navigation we know that this needs to be aligned top to bottom so let's go ahead and give that a class name of flex to make make sure that it's displayed flex and then Flex call to ensure that it goes in the column Direction after we've done that we know that they need to be split by 24 pixels so let's give that a gap of six and we also need to push the nav away from the image by 24 pixels so we'll say mt6 to give that 24 pixels of margin top as well that's looking great let's move on to our social icons for our social icons we need to add a class name of flex again just be able to control these much more easily we're going to say justify to the center to ensure that they move to the center of the screen and then we'll go ahead and give those a gap of six as well to ensure that they're split by 24 pixels we can also add a margin of six to ensure that the margin top is 24 pixels as well with those knocked out that just leaves us our paragraph here at the bottoms and we're going to go ahead and give that a class name of mt6 to push that by 24 pixels once again now that we've finished our mobile Styles and everything is looking good on mobile let's switch over to tablet and see if everything still looks good over there I'm going to slide my tablet view out a bit so that I can get a better look and we see that the only thing that I'm seeing that needs to change is going to be this navigation at the tablet size we don't want this to be going top to bottom anymore now we want the nav going left to right so what we need to say is medium Flex row and that should allow us at the medium size to go and flex that to the row Direction and then we also need to say justify Center to ensure that our navigation items are pushed towards the center that is all of the tablet Styles now let's move on to desktop and see if everything still looks good once again going to pull this out a little bit more just to be able to take a closer look it does look like everything looks good at this screen size as well which means it's time for to just go through make sure we didn't miss anything or that nothing was broken by looking at all of our screens at once I'm going to scroll down to the bottom and look and see mobile looks great the tablet view looks great and as we scroll over to the desktop we can see that everything is aligned everything looks perfect there which means our responsive footer styles are complete now that we've completed all of our sections and we've made all of our sections responsive now it's time to actually dive into the effects that are really going to make this page pop and in order to do that we're going to work mostly from the tablet view just so we have a balance between the size of the code screen and the actual view itself and we'll switch over to desktop when we need to modify some of those elements as well now what we're going to bring in is framer motion and in order to kind of see some of these some of the documentation for this I'm just going to go ahead and bring up the brows tab inside of polyan and look at the documentation for framer motion especially the introduction just so it can have give you a brief overview of what frame or motion's all about so frame or motion is a react component library that we can install with npm install framer motion now it's already installed in the template so that's not something we have to worry about but then where we're importing this all we need to do is go ahead and import motion from frame motion and this allows us to use the motion component so as it shows we can use the motion component and in fact we can replace any of the HTML or SVG elements with their corresponding motion components and that will allow us to add different props that allow us to animate that component so you can see it's very easy for us to add animation props and we also have a flexible transition prop that allows us to configure that animation completely so knowing that let's go ahead and close our brows browser and let's go ahead and open up our code and start implementing this in the hero section so I'm going to go to hero. TSX and close out that sidebar just to give us a little bit more space in the code and then we're going to import motion from frame or motion now the first thing we're going to take a look at is the Cog icon so instead of our next SL image component we're actually going to use a Fram or motion and we're going to turn this into a motion. IMG now that does change our source because it can no longer be static image data now it has to be the actual Source string so all we need to do is change our Cog image to Cog image. SRC and that'll give us the source of that image after we do that and save we can see that nothing on the page has changed except for the fact that nextjs does not allow client components when we haven't told it that this is a client component that we're creating so we need to come up to the top of our file and we need to to say use client and that will allow us to use framer motions client components as soon as I save that it should refresh and bring us back to the page as it was now the layout of the page hasn't changed but what the motion. image component has allowed us to do is now add some motion effects to this Cog image that we added this to so now we have the ability to add some additional props to this and we're going to start with what we actually want to happen now what we want to happen is let's go ahead and first experiment with this just using static tail1 CSS classes so we'd like to have this move up and then down and then come back to Center so let's see what for example if we move it up we could use negative Translate Y and then we could do something like 30 [Music] pixels and then save that and that'll move that up 30 pixels and of course if we take the negative translate and turn that into a positive translate that'll move that down 30 pixels and that's essentially what we want to do we'd like to take it from 0er to -30 back to zero to positive 30 then back to zero again so that's going to be the full transition let's go ahead and add that let's take remove those classes from Tailwind CSS and then we'll add that as an animate uh prop we're going to set the animate prop to go from Translate Y and we're going to say that it goes from -30 to 30 and then for our transition we're going to set this so that we have a different repeat so we want this to repeat infinitely we don't want want it to happen once so we say repeat Infinity we're going to use a repeat type of mirror so that we have it going back and forth so once it gets from -30 to 30 then it's going to going to go from 30 to -30 and back again so that's going to allow that to happen and then the duration is going to be let's see probably about 10 seconds let's see what that looks like and see if everything happens like we want it to so let me go ahead and refresh this page let's see if we have this the animation that we want the duration seems a little slow so I'm going to change that to five and see if we have that working yet [Music] and it's still a little slower than I'd like so I'm going to actually bring that down to two and see if we get the effect that we're after now the only thing that is a little weird on this is that our ease isn't set correctly so I'm going to say ease and I'm going to set it to ease in out and that's going to give it a much smoother start and stop there so let me go ahead and refresh this page once again and see if we get a smoother start stop and indeed we do I'm going to slow this down just a tad set this to a duration of 3 seconds refresh the page and see where we're at and that's looking perfect right there that really is that nice just kind of eye-catching almost breathing motion uh for our Cog that's exactly what we wanted let's make sure that that looks good on desktop as well and then we can move on to our next part so as I switch over to desktop let me zoom in here a little bit so we can see the full desktop view to give us the the best view that we can get and that just looks impressive it looks amazing it's exactly what we wanted to create with this hero section let's scoot this back in and go back to our tablet View and let's put this somewhere in the center here just so we can see I'd like to see 100% of our tablet view if we can so let me go ahead and set this down a little bit more there we go we've got that all lined up so let's go ahead and switch our cylinder and noodle images to be use a parallax effect in order to do that there's a couple of things that we need to import from framer motion as well and this is going to be use scroll so the used scroll hook allows us to get the scroll position and then change the position of other elements or animations based on that used scroll hook so let's go ahead and import that I'm going to use a const of scroll y progress and that I'm going to get from my use scroll hook and my use scroll hook also takes some options so I have to know what exactly I'm targeting as my for my scroll position really what I'm targeting is the hero section itself I want to know how much that hero section has scrolled so I'm going to say Target and then we need need to give this a react ref now a react ref we can bring in by using our use ref and so I'm going to say const hero ref equals my use ref from react so if I hit enter there it should bring import that correctly and then I need to set this on my section so I need to set this as a prop I'm going to say ref equals hero ref and that's going to tie together this use ref with this element right here now my target is going to be that hero ref and I'm going to say that my offset is going to be start end and then end start and essentially what this offset is saying let me double check that this is oh yeah I need to give this a default value of null that will take care of that so essentially what this start end and end start is saying is that when the start of my hero reaches the end of the window so that's actually never going to happen because we can't scroll down that far but if the start of this hero was scrolling up and it reached the end of the window that would be the start of the scroll y progress and then when it ends that's going to be when the end of that hero reaches the start of the window so that's going to be about this position so we're going only going to track it from those two positions and then this is going to give us a number between 0 and 1 now since we don't want to actually move these only 0 or one pixels we're going to want to transform that zero and one using the used transform hook so I'm going to bring in the used transform hook and that's going to allow us to transform that value so I'm going to do is I'm going to say con Translate Y I'm going to set that to use transform of our scroll y progress and we're going to transform as the value goes from 0 to 1 we're going to actually go from 150 to150 so that's going to track that 0 to1 value and it's going to transform that to that range of essentially 300 different numbers now we can use another hook in order to see what this value actually is and look in our Dev tools and see what's being changed so I can actually say use motion value event and when I import that let's go ahead and use this so use motion value event and so I'm going to look at the motion value of scroll my progress I'm going to say whenever that changes let's go ahead and log that out so I'm going to get the latest value and all I'm going to do is go ahead and console.log that latest value now in order to actually see that value let me come over and open up my Dev tools I'm going to go to the edit Tab and I have the console open so as we scroll I'm going to see the different values as they come through so we're right now about halfway through that particular hero section as we continue to scroll it's going to go to almost one if not all the way to one as we scroll okay so there's our one that means we've totally scrolled through it and as we go back up we're not going to get to zero because we can't scroll past this particular hero section we can only get to about 044 so we know that we can transform this from 0 to one we can also look at this Translate Y value so if I put the same thing in here and use my motion event here and go ahead and just paste that in that means that when we reload the page which I'll do right here I can see that that would then go from 17 I'm going to see - 39 NE 115 so that's the value that we're actually going to set as the Translate Y on these elements to ensure that they have that great Parallax effect so let me go ahead and remove that use motion value event cuz I was just to show you what that looks like let me go ahead and close out my console and then I'm going to go ahead and scroll down to my cylinder image and add this on here now we know that we need to replace our next SL image with motion. IMG and we're also going to replace our source with cylinder image. SRC to give us the string source of that image nothing changes yet because we haven't added on any of our values here so what we're going to do is we're going to add on a style tag and we're going to say the Translate Y value is going to be equal to our Translate Y that we have up top so so the Translate Y of that one is going to be equal to our motion value that we just set up top based on the scroll position so as we scroll we can see that that cylinder moves along with that scroll that looks great but of course it's only going to scroll for a little bit before we reach the part of the page where the user can't see that anymore so the noodle is really what they're going to see especially in the desktop view so let's go ahead and change that over as well and we're going to use the same translate to scroll it with the same Parallax effect so let me go ahead and change this to em motion. IMG as well let's change our noodle image tole image. SRC and let's set the style tag to Translate Y and set this to the Translate Y value there as well so we have that set and then in order to see that we're going to pull out the desktop view and go ahead and just open this up a little bit so that we can see what's going on one of the things that's interesting about this motion value is it's actually going to override what we set with our rotation because it uses the same transform so transform controls rotation it it controls translation in the X and Y Direction and so we actually need to go ahead and set this on this as well so we're also going to say rotate and I believe we're going to have to say 30 or actually we can just give this a number of 30 and that will allow that to be rotated as well so this is going to control the rotation which is just going to be a static number that's fine and then it's going going to change this translate dynamically based on the user's scroll position let me pull this out a little more so we can see this I want to see this 100% this this full great Parallax effect ahead and scroll down and we can see that indeed yes our noodle does change it goes from overlapping the last section to overlapping our Cog a little bit and just gives it an excellent amazing eye-catching effect that wraps up our animation for this particular section if we want to go over and we want to see this in all three panes let me just go ahead and open this all the way up let me switch to the horizontal View and then we're going to see what these motion values do in all three screens so as I scroll down here we even see that this is going up and down a little bit which is a cool effect for mobile as we scroll over to the tablet view we can see that we still get our great Parallax effect with our cylinder and then when we go to the desktop view we once again see multiple Parallax effects as well as our hog effect going on so all those look really really nice and it's adding a great great effect we're done with the animations in the hero section which means it's time to move on to our next section now that we're done animating our hero section let's scroll down to the logo ticker and we what we'd like to do is have the logos scroll from left to right or excuse me from right to left infinitely and as they scroll we'd like them to appear on the right side of the screen and disappear on the left side of the screen now our mask image that we already have set up is going to control the appearance and disappearance of those logos as long as we can just get this interior div to move to the left so let's go over into our logo tier. TSX and just to give us a little bit of extra room I'm going to go ahead and close out that sidebar and we're going to focus on the code now as we've done in our other sections we need to bring in motion and we know that when we do that we're also to need to make sure that this is a client component which allows us to use client side effects like use State and other things that will help us to add client side effects to our component now what we're going to be doing is essentially taking this interior flexed component and we're going to replace that with a motion div and we're going to translate it to the left so let's try that by just replacing this div with motion. div and of course we need to have our ending motion. div set as well so that that means that is replaced as soon as I save my page nothing changes yet because we haven't done anything but let's go ahead and start our animation so in order to do this what we're going to do is we're going to add an animate prop and that animate prop is going to say it's going to translate X and that's going to be let's try 100% let me hit save and see what happens to our logos that happens really really quickly let's slow that down a bit so we can see that let me go ahead and add a transition prop to control that transition and we're going to say duration for now let's just say five and save that again to see if we can get that to reload when I hit the reload button let's see how that happens so it does look like it does scroll through all of our logos but of course there's a couple of things we need to change in order to make an infinite effect and be able to see all of the logos that means we actually need to have two sets of these logos so I'm actually going to copy and paste these like so so copy come down a couple of spaces just so I can know what's going on and then paste that and I'll even add a separate comment that says something like second second set of logos and that will help me understand what's going on here and say for animation now that we have that done let me go ahead and save and reload my browser again and see if we can see this effect going on so it does go through both sets of logos um of course we only want that to go through one set of logos and then repeat that's what turns us into an infinite animation so if we scroll back up to our transition what we're going to say is this is going to repeat infinitely so repeat infinity and we also want this to have an ease of linear so that it doesn't slow down or speed up at the ends that should make it much easier to see and since we only want half of the logos to actually show or half of them to translate and then start over that means instead of going negative 100% we actually want this to be netive 50% so once it start once it goes from 50% and we can see this going back the other direction that's definitely not what we want let's change this repeat type to Loop so that we get the repeat type working the way that we want and refresh our page and see if we've been able to set this up correctly so we can see that they're going over to the left going over to the left linearly and there's a slight jump and that's because even though these are split by 56 pixels there's no other additional 56 pixel Gap at the end in order to add that we're also going to need to say pr14 that's going to add the additional spacing that we need in order to make this look seamless so once I refresh my browser I should see a seamless effect going to the left and it should look like it's happening infinitely and that's just because it's an optical illusion it goes left by 50% starts back at zero again and goes left by 50% again to Infinity now in order to slow this down and just make this look like a smoother effect let's set this duration to 20 after we refresh our page that should make our animations just look so smooth and this really is a beautiful effect going from the disappearing on the left to the disappearing on the right coming in going out it really adds a touch of Polish to this page that is going to catch someone's eye and really make them pay attention to this small little section where we just are showing these logos that wraps up our logo ticker animations let's move on to the next section and animate the next section as well now that we've finished up with our logo ticker animation let's go on to the next section and see what animation we want to add here so what we're going to add is a parallax effect to our tube and our pyramid images that show on the right and the left of this product showcase image and that's going to be in our product showcase section in order to set this up we know that we're going to need to go to the top and tell the react that or nextjs that this needs to be a client component so that it it loads it on the client side and we also need to import motion from frame or Motion in order to start getting this set up now we know that we're going to need to replace our next slash image with motion. IMG for both of these images so let me go ahead and do that I'm going to say motion. IMG I'm going to change the sources respectively so pyramid image. source and same thing on this tube image I'm going to say motion. IMG here and replace the tube image with tube image. SRC that shouldn't change anything except for apparently the width of our tube image so let me go ahead and set that with width to 248 as well to ensure that it is set correctly after that we know that we're going to need to use the scroll position of the user in order to create that scroll Parallax effect so I'm going to import my use scroll hook and once I've imported that I can just go ahead and add it I'm going to say use scroll and we want to know what we'd like to be scrolling as the target so what we're going to track as the scroll position of this and this is of course going to be this product showcase section so in order to set that Target I'm going to need a way to reference that Dom element and we do that with the use ref hook so I'm going to come up here and going to say const section ref is going to be equal to use ref and I'm going to set that to a default of null just so typescript doesn't get angry with us I'm going to comment this out just for a second so it doesn't mess up my rendering and I'm going to go ahead and add the ref right here so I'm saying ref equals section ref and that should hook up this to be the Dom element ref uh included here so once I do that I can uncomment this use scroll again I'm going to say my target is section ref now my offset is going to be when I want this scroll effect to take effect so I'm going to say offset and that's going to be when the start of that section reaches the end of the window until the end of that section reaches the start of the window so essentially from this position right here here all the way down to this position right here is when this is going to take effect now in order to track this I also want to get the scroll y progress from here and very much like our other implementation I want to transform that from 0 to one to some other different numbers so I need to use my used transform hook and I can say const Translate Y because we're moving this in the y direction is going to be equal to my use transform I'm going to transform my scroll y progress and as it moves from 0 to one I'm going to set my transform from 150 to - 150 so it's almost exactly like the implementation that we did for our Parallax for the hero uh section but now this is happening in this section instead so I'm going to take my Translate Y value and set this as a style on my motion images so style equals Translate Y and I can just do it that way that means Translate Y equals Translate Y if they're both named the same thing in JavaScript and an object you can do that syntax and then down here I'm going to say the same thing so style equals Translate Y and that's going to set that as well so once we save that let's see what happens when we start to scroll and indeed I am seeing a great Parallax effect happening with my pyramid as well as my tube they're going over the product image as we scroll now we know that these don't show up in Mobile but we do know that they show up in desktop so in order to take a look I'm going to stretch my screen out and let's go ahead and look at the horizontal view again and see how this looks as we scroll on the different screens so I'm going to come over here and going to scroll on tablet like we just saw that is working well let's come over to our desktop view and make sure everything's looking good over there as well and it is it's looking beautiful it's just adding that nice polish touch that shows that you added the extra time and effort into this page and that you really do care about what the user experience is like with that that wraps up this section of animations this turned out really really well but it's time to move on to our next section in this page okay we finished up with our product showcase animation we're getting that great Parallax effect which means it's time to move on to what we want to do with the pricing section now there's not a ton to do here but we do want this little tag to animate the rainbow from right to left as well and this is an interesting little animation it just catches your eye and that's exactly what we want for this particular section so let's go and do sections and let's go and do pricing I'm going to close that sidebar down so we just have a little bit more real estate for our code and then we're going to look at how we can do that animation of course like our other animations we're going to import framer motions so I'm going to import my motion component from framer motion and we want to say use client so that this is a client side effect after we save that we can come down into our pricing tiers and see where our popular tag is located it looks like it's located right here which means that we need to adjust this span tag in order to make sure that the background is going to animate from right to left now we can't animate the background without it being wider than the actual text itself so we actually need the background size to be larger than the actual text and then we can do that animation what that means though is that we need to add an additional gradient and then we need to change the background size to 200% so let's see if we can just go ahead and add another set of these in here so I'm going to copy and paste these colors right here I'm going to add this right after my other ones and so it's going to add an additional gradient on there now when we do that we can also go ahead and change our background size to 200% and I'm just going to say background size and that's going to be my 200% let's see if that looks the same as it did before it looks like it looks really similar so I'm hoping that this will work the way that we expect it to but let's see what happens when we change the span tag into a motion span so I'm going to say motion. span because we can use any tag for our motion any HTML tag we can change to a motion tag so let's see motion. span here so ending motion span let me save that and that should still be aligned the way that we want and then we need to go ahead and add our animation props so our first one is going to be animate and we're going to set that to background position X we want the background position X to be animated 100% so let me save this and see if we see that animation and we of course want that to repeat and we can control that with the transition prop so let me set the transition to repeat infinity and we're also going to want the E to be linear because we don't want to see a speed up or a Slowdown of that and we want the repeat type to be Loop because we want that to start over at the beginning every single time so as I save that let me see if I can refresh my page and actually start to see that happen so it is showing that for sure um and I don't think I'm seeing anything crazy there I think the only thing I need to change is my duration so let me go ahead and set my duration let me actually just set that to one and see if that's the correct value there so as I refresh that I do see that that's just slowly Ming moving from right to left and as I refresh that I do see that it's slowly moving from left to right so if we want to change that direction we can just change this from negative to positive 100 let's try to do that and then it moves in the opposite direction now this animation is pretty small so it might be a little bit hard to see but it is an excellent animation let's see if we can change the zoom level to 200% and get a closer view at what that actually looks like so let me change this to 2 200 and we do see as we Zoom this or open this up and then we set this to 200% we can really get an idea of what that looks like close up it looks like a great beautiful animation for this part of the page it's just a little pop just a little extra piece of Polish to add to our pricing section now as before let's go ahead and go to our horizontal view so that we can make sure that everything looks good on all three views so I'm going to open this up even more I'm going to make sure that my popular is showing up well there it is on tablet it's showing up great and on desktop we're seeing this showing up well here as well so that just adds another level of Polish to our pricing section that wraps up our animations for the pricing section let's go ahead and move on to our next section of the page now that we've wrapped up the animations for our popular pricing section let's scroll down to our testimonials section and this is going to be one of the most impressive effects on the page because we're going to make these testimonials scroll from the bottom to the top and it's going to look like we have infinite testimonials that are scrolling past essentially what we're going to recreate is this infinite scroll effect that we've already created with our logo ticker but we're going to instead of going from right to left we're going to recreate this from top to bottom so in order to do that let's go ahead and open up our testimonials component page and and then we'll go ahead and dive in the first thing I'm going to do is go ahead and tell this at the top of the page that we're going to use client so I'm going to put in that use client here and then below here I'm going to say import our motion from motion or sorry framer motion and that should allow that to import correctly and then we're going to see how we need to change around our testimonials so that these actually work well with our current setup the first thing we know we need to do is we need to duplicate our testimonials so we have a one set of testimonials being shown here we need to show these twice I could copy and paste this entire block of code but I don't think that would be the best way to do this because it's a lot of duplicated code if we need to change something we'd need to change it twice what we can also do is just use a new array with two items Loop over that array and then go ahead and loop over our testimoni every single time so that's the strategy I'm going to use I'm going to say dot dot dot new array it's going to have two items we're going to just fill that with a dummy value of zero and then we're going to map over that and for each item we're not going to use the element itself we're just going to use the index of the element and we're going to show a react fragment so I'm going to import react just hitting enter there do fragment and that'll allow me to use a react fragment and really the only reason I'm using the fragment here is just to have the key set correctly so that react is happy and it doesn't mess up whenever I drop these testimonials in here so I'm going to go ahead and just cut this paste it in here and now instead of our three testimonials now we have them duplicated into six for each column so that's what we need in order to make them look infinite because of course as we move the testimonials these testimonials up we need something to come in behind and that's going to be the other testimonials that we're going to be looping over twice here now that we've done that there's a couple more changes that we'd like to make I think one of them is going to be that as we Loop through these testimonials we don't actually want the mask image to be on the column itself otherwise the mask image will move with the testimonials we actually want that on the parent container so I'm going to cut this mask image from this testimonials column and I'm going to pull it down into our wrapping flexed container here and just paste it there it's not going to change my look I don't think at all but it will change how this works Works a little bit I also want to take my margin from here and move it to my wrapping container as well because we don't want that taking up any extra space as we're trying to make these testimonials show the way that we'd like them to so I'm going to go ahead and clean up the spacing there a little bit save that again and that will mean that our margin and our Mass container are moved a little bit doesn't change the look yet so let's go ahead and see what else we need to do in order to make this work now what I'll need to do is I want to be able to flex a wrapping div but I don't want to change the size of this right here so if we change the size of this div by directly flexing it with our parent container we're going to end up with problems so what I need to do is wrap this in another div allow that div to be the one that takes on the flex from the parent container and then that will allow us to move this div independently of this and resize it independently as well so in order to do that I'm also going to move up my props do class name and pass this directly to this parent container instead so I'm going to remove props do class name here just by cutting it I'm going to say class name is going to be equal to my props do class name that I'm passing in and now that I no longer need my Tailwind merge I'm going to remove my Tailwind merge as well and just make this a static string let's see if that still shows up the way that we want it to and it looks like overall it does the only other thing that's going to mess us up as far as I know is that when we Flex this container right here by saying a medium flex and large Flex we're going to wind up with problems there as well so I'm going to change these instead of flex to block and that's going to enable those to display block not going to show any difference here but trust me whenever we start to transition these it's going to make a difference in the size of this container so now that we don't have this container being flexed this will allow this container to be the actual size of two times of our original column size which is what we need if this works correctly what we'll see when we do a negative Translate Y 12 is we'll see this come up and be exactly at the top of our testimonials here it's actually a little different and that's because we need to add a little bit of padding to account for The Gap as well okay so this looks like we're working correctly right now now instead of just making this a static negative translation all we need to do is then animate that translated value and of course that's where our framer motion div comes in so let me import my motion. div here and let me change this over as well to a motion. motion. div save that nothing should have happened there except for it gives us the ability to use the animation prop so let me pass this an animate prop and in that that animate prop we're going to say that the Translate Y is going to go to 50% like we said before and it's obviously going to happen really quickly that's not what we want so we're going to use the transition prop to control that animation in that transition prop we're going to say that it repeats infinity times that the ease is linear so that it all looks smooth when it starts and ends and that the repeat type is going to be Loop so let's use that let's save that and let's refresh our page and let's see what happens when we do this oh that's way too fast let's slow that down with our duration and let's make our duration something like five for now just to see if this is a smooth animation and I will refresh my page again so let's see if we see any jumps anything that would give us the tell us that we didn't create this correctly and it looks like we did it looks like this is created exactly as we wanted it to we need to slow this down a little bit slower so I'm going to make this duration 10 now in order to create the illusion that these are moving at different speeds we would like to go ahead and dynamically set this duration at the parent container and pass it in as a prop so all we needed to do to do that is go ahead and tell this testimonials column component that it can also take a duration prop it doesn't have to be there and it's going to be a number so we'll do that and then we'll set this duration to my duration that I passed in or if it's not there we'll just go ahead and set that to 10 excuse me that's props do duration here that's why that was showing that that wasn't there so this is going to be a default of 10 but of course that's going to allow us to pass in a prop to set the duration dynamically so when we come down to our wrapping div we can give each of these a separate duration and that's going to just make this look extra clean for this particular animation so I'm going to set the first duration to 15 so that's going to slow that First Column Down Let me refresh my page and see what that looks like okay so now they're moving independently and that's a really slick effect let me set my second column let me slow that down even more I'm going to set this duration to 19 and when I refresh my page we should see that that's actually going to go slower than the First Column now and then for my third column I'm going to set that in between and set the duration of that to 17 now we can't see the third column yet and of course that's because we're not seeing our test stop view so let's actually just go ahead and switch over to our horizontal mode and let's see all these three at once I'm going to switch over to horizontal it's going to start with mobile so I'm going to scroll over there scroll down and we see that we do see those looking great on mobile on the tablet view we see two testimonial columns so that looks great over there as well and then once we get to the test toop view this is really where this effect comes alive with all three testimonial columns scrolling over each other now what I'm noticing is that the problem is we don't have a Max height set here yet so this is going to show things that we don't want this to show so let's go back in and add our Max height looks like we forgot that and that will enable this to make sure that the Overflow is properly hidden so I'm going to say the max height is going to be 738 pixels and then we're also going to say overflow hidden to ensure that we are indeed hiding any overflow that we have so let me move this back out and make sure that that's taking effect accurately and it looks like it is I'm just going to give this a couple more seconds to scroll up really take in this effect because this is a really great effect that we've added here and we've done this really easily with frame or motion frame motion gives us the tools that we need to do effects like this really really easily now that we've taken care of our testimonial section let's scroll down to the last section of the page that we're going to animate and that's going to be this star and this spring image we're going to add a parallax effect to that just so that we can see this a little better as we're creating our code I'm going to leave this in tablet view for now but after we're done we'll look at the desktop view Ure everything looks great there and of course on mobile will do the same there so let's go ahead and open up our sections and let's open up our call to action section I'm going to close down the sidebar to give us a little bit more space for the code and like before we're going to make a couple of modifications to our section we're going to add the use client directive and below the Imports we're going to import our motion div from framer motion once we've imported that motion component we can start to use that and we'll replace our image our next image with motion. IMG and like before we'll need to add the actual Source into the source property same thing here motion. IMG will allow us to use frame or motion properties and we'll do the same thing with spring image. source to change that around now nothing has changed so far about the way that this is laid out but this does allow us to use a style prop and track the user scroll position so in order to do that we'll bring in the use scroll Hook from frame R motion and we'll use the progress of this section here in order to track the scroll progress so I'm going to say that we need to add a const scroll y progress and that's going to come from use scroll and that use scroll is going to take in a Target which right now is just going to be null because I need to fill fill that in and it's also going to have an offset and that offset is going to be when the start of the call to action reaches the end of the window until the end of the called action section reaches the start of the window which probably might only happen on a small Mobile screen but that's fine that will work out just fine now for our Target we need to add a reference to this section right here so I'm going to add a ref again I'm going to say const section ref and that's going to be equal to use ref and I'm going to hit enter and give that a default value of null and then here we'll say section ref now we need to attach this to the section by saying ref equals section ref and that will attach the target to the correct section there like before we're going to want to transform that scroll y progress so we know that that's going to be a value between 0 and one as we move through the scroll of that particular section so we need to also use a use transform so I'm going to import that use transform and I'm going to transform the 0 to one value to 150 and- 150 by saying const Translate Y equals use transform and that's going to transform scroll y progress from 0 to one to 150 and 50 so it's going to go from between these values to between these values it just allows us to directly use this translate position and then all we need to do is go ahead and set the styles of these motion images to use that transformed position that we just set so we can say style equals and then we can say Translate Y to set the value of this to the key of Translate Y so Translate Y equals Translate Y is essentially what that's saying and same thing here Style equals Translate Y that should allow that to be set correctly now once we do that let's go ahead and refresh our tablet View and see if we see anything different I so I see the images moved a little bit but let's see as we scroll if we see those images moving more directly and indeed we do that's a nice effect but I'm sure that looks even better on desktop so let's check that view out by going over to our desktop tab sliding this out so we really get the full view here and let's go ahead and just scroll past this and that is just a beautiful effect looks really really nice very eye-catching for sure and it's going to direct the users's attention to that section as they scroll to that particular section now to finish this out we just need to ensure that we haven't broken anything on any of our views so let's go to the horizontal view let's scroll over to the mobile view to get started with and of course those don't show there as we scroll down to tablet we see these show up left and right and of course on desktop it's most impressive because we see those images in full screen so this looks really great and that wraps up our animations for the entire page we've done an amazing job we've added a lot of eye-catching animations that show that we really put time and effort into this page I'm really really happy with how this turned out