Create a Stunning Dark Theme SaaS Landing Page: Frontend Dev Tutorial

have you ever dreamed of building a landing page that screams higher me to potential employers a portfolio piece that showcases your skills as a front and developer in a way that's both beautiful and functional now let's face it plain static websites that could have just as easily been built by a robot just don't cut it anymore you need portfolio pieces that stand out from the crowd you need something that grabs attention and will have hiring managers begging to interview you that's where this in-depth video tutorial comes in I'll show you how to build a Next Level landing page using the power of nextjs and framer motion we'll be crafting silky smooth 60 frame per second animations that leave a lasting impression I'll show you how to implement eye-catching gradients that elevate your design and most importantly we'll ensure that your landing page is fully responsive looking fantastic on any device imagine the impact this one project could have on your career a portfolio piece that doesn't just showcase your skills it actively lands you your dream job don't have experience with nextjs or framer motion no problem I'll break it down step by step ensuring you understand the concepts and can confidently Implement them on your own are you ready to create a landing page that truly sets you apart if so then make sure you watch this video in its entirety because we'll be walking through exactly how to do just that in this tutorial now before we dive in make sure that you go to the link in the description because because I've included a 100% free design file and starter template to get you started on this project now let's go over what the finished project is actually going to look like in depth in the hero section we're going to use some amazing grading effects to create an almost planetary feel we're also going to use frame or motion to include an Easter egg that allows a user to drag the images around the page down in our logo ticker we're going to create an infinite scroll effect so that the user can see all of the logos as they scroll by no matter their screen size in the featur section we're going to create an impressive glowing border effect that will be sure to attract attention as the user navigates around the page as we get to the product showcase section we're going to use some subtle but impressive animation effects to animate the entrance of our product screenshot moving down to the FAQs we'll make sure that there's a buttery smooth smooth animation as the user clicks into any one of the questions to display the answer even at the bottom of the page we're not leaving out the call to action section we're going to be adding a parallax effect to make the images on the left and right move along with the user scroll position all in all when we're done this is going to be a next level project that's going to teach you something elevate your skills and help you land that job that you've been dreaming of to get started all we're going to do is drag our folder that we downloaded into VSS code and that will allow us to Jump Right In now the first thing that we're going to want to do is run an npm install on this new project so let's go ahead and bring up the terminal and then when we do that we're just going to run npm install and we'll give that a minute to populate our node modules and create a package lock Json file after that let's look at how the project is currently set up so we have a public folder with a couple of default svgs and we also have a source directory inside the source directory we have the app folder because this is using the app router from nextjs and we have a layout file which defines our root layout our HTML and our body as well as some default Styles and the page. TSX and this page. TSX is defining the default HTML as it sits right now on the index page so for now what I want you to do is go ahead and delete all of this and just replace it with a simple div and say something like hello world and we'll keep it there we also don't need our image anymore from next SL image so I'm going to remove that and save that as well inside our assets directory we have our icons and and our images that we're going to be using for this design so all of those will be available to you without having to export them from the figma file although you certainly could do that if you want the practice in doing that but all those will be available to us and I'll show you as we move throughout the project how we're going to be using those now one of the first things I always like to do is take a look at my design so that I understand what I'm getting myself into so we have a mobile design we have tablet and we have desktop so we can see those out at those three sizes and then we can work from there as I explore the mobile design which is the primary one that we're going to be focusing on and then we'll add responsive styles to allow the tablet and the desktop to show in the mobile design I can see that I have a banner I have a Navar I've got a hero section I have a logo ticker that allows me to see the different logos of the companies that this company works with we also have a feature Fe section with mobile design stacked like that and we have a product showcase where we're showing the product itself as well as an FAQ section where we're going to have an accordion that we're going to slide up and down and a bottom CTA section to allow someone to get access to the app and a footer so nothing too crazy right there I'm also noticing as I look through here that we have a DM sand font is the primary one that we're going to be using we're going to be using a bold and a regular weight there and it looks like the only font that will be loading on this page so that's always good to know as we go through our design now that we've taken a look at the design let's go back to the code and let's open up our browser and start the actual project so I'm going to bring up the terminal once again and I'm going to run npm runev in nextjs this is the default command that allows us to start this browser and then I'm going to copy and paste this over into my browser window and open it up to the right of the project now you can see once I've done this that we have our hello world showing up which is encouraging but we also have a lot of styles that are causing uh some interesting things to happen on our page so what I'm going to do is I'm just going to go ahead and go in and delete those Styles those are going to be in sourcea global. CSS this is where we're bringing in Tailwind CSS we're going to be using that but we don't need the default styles that ads for its default HTML so I'm just going to remove all of that and just leave our Tailwind base components and utility functions here as soon as I save that uh we can see the page refresh and all of those default styles are gone now that we've got our project up and running let's go ahead and explore the design and start creating some of the components or the sections so I'm going to go over to my design and we're going to first concentrate on the banner component what we can see is that we have some underlined text um and we also have the banner itself which looks like it's about 48 pixels tall it's got um 12 pixels of padding on the top and bottom and we have a container around it to keep any text from overflowing as it gets bigger so I'm going to go ahead and put that in too but let's go back to our code and we're going to inside of our app uh we'll go ahead and start creating some components so let's go ahead and create a components folder just going to name that components and then inside that components folder I'm going to go ahead and create my banner. TSX component since we are using typescript we will use TSX uh because that is the typescript version of jsx so inside that I'm just going to say uh cont or sorry export con Banner is going to be equal to a function and in that function right now we're just going to return for the all intensive purposes right now the word Banner so let's see if that shows up by going inside of our app and into our page and instead of hello world now we're going to bring in the banner component so I'm going to import Banner from at/ component banner and then this is going to be the only thing on my page right now so I'll just go ahead and call this Banner right like that and we do see our Banner show up on the right which is great news so that means means we can continue the development of our Banner component now in order to do that I'm going to go ahead and create a container div so I'm going to say div class name equals container and this is a Tailwind CSS function that allows us to add some spacing in there and then I'm also going to use the text of explore the demo that's going to be a link so I'm going to have a HF equals and then we're going to have a hash there because we can put that link in there later and we're just going to say explore the demo now our container isn't adding any padding left and right yet so I need to go into my Tailwind config and tell it that I need my container to do something so let me go ahead and actually take out the default config I'm going to extend my container and I'm going to tell it that my padding should be two rims or sorry one ram which should be equal to 16 pixels so that padding will add the padding left and right that we need here back in my banner component I'm going to go ahead and add a wrapping div around the entire [Music] thing and I'm going to just go ahead and leave it the class name blank for now and this is where I'm going to add my padding top and bottom so I'm going to say py3 and that should add some padding top and bottom and of course I want all the text in the inside of this div to be centered so I'm going to say text Center and that will do the trick we need this explore the demo to be underlined though since it's a link so I'm going to say class name equals underline and that will add the underline that we need based on the design the underline is a little bit offset as well so let's see if we can say underline offset 2 and see what that looks like that looks pretty good but let's keep going to 4 and that looks even better so I'm going to leave the underline offset to four this is also a medium font so I'm going to say font medium to make that a medium weight now one of the things I always want to be mindful of is matching the font weights to my design and one of the things that I've noticed is that depending on what webkit the browser rendering engine does this can be difficult because it always makes the fonts look a little bit heavier than they should in order to fix this especially in uh Chrome or webkit based browsers I need to go to my layout. TSX file where I can set my body class and I want to add an anti-alias class now I'm going to show you what this does here in a second I'm also going to add this in a way that uh is using the JavaScript interpolation in order to add this class name here so let me show you how to do that I'm going to say anti- Alias and we can see what this is doing is adding a webkit font smoothing rule with a value of anti-alias and it's also adding a Moz Ox OSX font smoothing rule of grayscale this is for for both the Chrome and the Firefox browsers so they show our font weights appropriately now this is not an ideal way to have to merge class names though so let's go ahead and open up another terminal and I'm going to tell it to npm install clsx this is just a class name merging rule that we can use within react in order to not have to do this every time we want to use more than one class so in here I'm going to import my clsx that I've just uh used and I'm also going to then use it so I'm going to say uh clsx here and I'm going to merge both that inter. class name with anti- alist now that's great but we're also using the wrong font so we're currently using inter and we should be using DM Sans so let's go ahead and fix that one as well let's go ahead and import the DM Sans font from the next SL font gooogle let's change our function to say DM Sands here equals DM Sands as well so we're going to get rid of enter all together and then we're just going to change this to use that new DM Sands rule so now my fonts should be in DM Sands and of course now they're anti-alias so they should also match the design a lot more closely the last thing we need to do in our Banner is we need to set our background color because of course right now it doesn't have a r rainbow background it has a white background and our design has a rainbow background so let's inspect that design and then we'll come back to our code and insert that rainbow background over in our design we can see that this has this linear gradient it looks like it has a 70% opacity and then it has five color stops so we're going to add a custom background using Tailwind CSS we're going to add each of these color stops I'm going to show you how to do that here in 1 second back in our banner. TSX let's go ahead and add that to the wrapping div so we'll see we'll say BG and then we'll add the brackets to add a custom background we're going to say linear gradient and then we're going to add in there [Music] to right and then we're going to add each of our color stops so that's going to be FCD 6 FF we're GNA go the next one is 29 d8 FF the next one is FFF d80 the next one f89 ABF and the next one is FC D 6 FF let's save that and we can see that that did create a linear gradient for us now in order to get these to be 70% opacity values instead of full opacity I'm going to copy these over into a CSS file because VSS code has some nice tools that allow us to instantly change values from hex to RGB hsl really anything we want to use with those so I'm going to just copy and paste this line I'm going to open up a new I'm going to call it just banner. CSS file and I'm just going to use this to go ahead and change over these values so I'm just going to go ahead and add a banner class class I'm going to go ahead and bring up this and say background image and then this allows me to see each of these values so I can go here and I can just change these over into my RGB values and of course I can add 7 to each of these so I'm going to do that to the second one as well let me go ahead and get it over to RGB 7 third one doing the same thing bringing this up clicking this a couple of times and then going to 7 fourth one is the same so I'm going to click through there to my RGB value and on my fifth one I'm going to do the same exact thing okay so I have my RGB values that I need um Tailwind does not like spaces so let's go ahead and change all of our spaces over into uh underscores that way tail when CSS will play nicely with this so I'm just going to write in underscores for each of those values and then I'm going to copy this back over into our custom rule so I'm going to just contrl C this come back over into my banner and then is contrl +v and let's see if we save this if we get those lighter values and it appears that we do indeed so I can go ahead and delete this banner. CSS file it has been useful but we don't need it anymore and we're going to go back to our banner. TSX now the last thing we need to do with our Banner is make it mobile responsive so let's see how we can do that let's pull this out a little bit and let's see what it looks like on the tablet view now if we go to our design we can tell that the tablet view has a little bit more words in there so we need to add those words in as well so I'm going to copy and paste these words in here and then we're going to use tail and CSS to make sure that those words only show up when it's so large so I'm going to go ahead and put those in here in a paragraph and we're going to go ahead and put this a tag inside that paragraph and then we're going to wrap this in a span tag just so we can add some styles to this text right here now this whole thing is going to have the font Medium as well if I'm looking at my design correctly so I'm going to need to take my font medium class CL and I'm going to pull it into my paragraph so I'm going to say class name equals font medium and that's going to add that into the whole thing and then I'm going to tell this to have a class name of hidden and then when it's small we'll say that it is in line so let's take a look now when we go down to mobile we see that when we go up to tablet we see it just fine so that's exactly what we wanted to do with our banner and with that our Banner is complete back in our design let's look at the next section that we're going to be working with and that is the Navar so we can see that the Navar has a logo on the left and it has a hamburger icon on the right and it looks like it has a flex rule where these are split apart and of course we have our same container that's keeping our content from touching the edge of the screen on the tablet and desktop design we can see that the hamburger icon is replaced with an actual navigation with a button so we'll do that after we create our mobile version of our navbar back in our code let's go ahead and create a Navar component by adding a file called navb bar. TSX to our components folder and then we're going to go ahead and Export a const uh navbar and let's make that equal to a return statement of navbar just to make sure that this shows up properly on the screen of course this won't show up until we bring it into our page. TSX which is where our index page is being displayed from so let's go ahead and import that navbar from our at components Navar and then let's go ahead and bring that right into the next section of the page and let's see if VSS code is smart enough to do this for us it's not so let's wrap this in a react frag and save this again and that should show our Navar as well as the banner that we've already worked on back in our Navar file let's go ahead and create a container so div class name equals container and inside that container we're going to go ahead and import our logo and we're also going to use our hamburger icons so for the logo we need to import an image using next SL image so the first thing I'm going to do is get the image itself that's going to be located in assets images and Logo SAS PN G so I'm going to go ahead and copy this relative path here I'm going to go back to my navb bar. TSX file and paste that and then I'm just going to say import logo image from and I'm going to go ahead and wrap this uh of course we're not going to want to use that quite the same we're going to go ahead and use a relative path so from this directory that's going to be dot dot slash and it should be assets images logo SAS okay so this is going to be the relative one and then we're going to bring in next SL image to display our image in an optimized fashion so I'm going to use the image from next SL image I'm going to hit enter to allow VSS code to automatically import that and then go ahead and give it a source of our logo image and an ALT tag to say uh SAS logo so that next image doesn't throw any errors now we can see that this is slightly bigger than we need it to be it really only needs to be 48x 48 so let's go ahead and add a class name to bring this down in size and we'll say h12 with 12 that should bring it down and we also need some padding on the top and bottom of our Navar as well so let's go ahead and add that in with a separate div we'll go ahead and tell that div to have a class name of py4 that should add the appropriate padding on there and then we're also going to want to have a hamburger icon on the other side now this hamburger icon is located under assets icons and then menu. SVG now we could directly grab this SVG and copy and paste it into our page or into our component I should say but I don't love that because it doesn't allow us to import it the same way that we would import an image and it's always great if we can do that so what we're going to do is we're going to use a tool called SVG in order to change the handling of how we load svgs so that we can load them exactly like images so in order to do that I'm going to open my terminal again and I'm going to create a new window and I'm going to run npm install save Dev SVG webpack this will install the file loader that we need in order to make this play nice with nextjs after that's installed I'm going to go into my next config and I'm going to add that as part of my next config so my next config is also going to include a webpack command and I'm just going to copy and paste from the S spgr docs this configuration that should allow this to load so what this does is it changes the webpack config it grabs the existing rule that handles SVG Imports and then it pushes that rule along with uh converting all SVG Imports to react components so this is exactly what we need for this so I'm going to save this and because I did that I'm going to also go ahead and restart oh it already Auto automatically did that that's the nice thing about nextjs it restarted my server to apply those changes so that we can instantly go ahead and import that menu. SVG so back in my navard TSX let me go ahead and import my SVG like so so I'm going to import my menu icon from assets SL ions SL menu. SVG and I should be able to use that with uh directly using it if I uh go ahead and create a component from it so menu icon let me go ahead and capitalize that first one and then let's see what that looks like so I'm going to go ahead and put that here and save that it may be white by the way which may be why it's not showing up so let's go ahead and give the Navar a Black Background by default by adding BG black to our Navar so now that our Navar is black we also can't see this menu icon so let me make sure that we have what we want here so I'm going to go ahead and add a class name of text white and there it shows up so we do have that they're also showing up top and bottom we definitely want those to show up left and right so we're going to flex this container we're going to say item Center and we're going to justify between to make them go between each other we also want to add a border around our menu icon so we're going to go ahead and do that with a div wrapper and that div wrapper is going to have a border it's going to have a border white and it's going to have a border opacity of 30% and it's also going to be a height of 10 a width of 10 it's going to be rendered as inline Flex so that we can change the icon inside of it to centered and we're going to say justify Center and items Center we also want a little bit of radius on here so let's go rounded large and that will create the 8 pixels of radius that we need for our nav bar icon the last thing on the mobile side that we want to do is create the glow around our logo this glow is going to be created by wrapping our div in a relative container and we'll do that by saying class name equals relative and then we want to add an absolutely positioned div behind it and that one we're going to have a class name of absolute this is going to be full width so we'll say width full it is going to be 8 pixels off of the top and have bottom zero and then we're going to need to create the blur background for this absolute positioned div in order to do that we're going to add a custom linear gradient so we'll do that with the BG and the two brackets and we'll say linear gradient to write and we'll go ahead and add the hex values that we need here copied and pasted from the [Music] design in order to see this we need to correct our two Rite to be the correct syntax and then we see this but it is over our image so we need to go ahead and add a relative class onto the image itself so that the image takes precedence over the blur in the background so that's a nice little blur effect that we add there and it's just created using a linear gradient that's absolutely positioned behind our logo now when we get to the tablet size we are going to need to make some changes to ensure that our navb bar shows up accurately on the tablet size and of course that means that we're going to need to hide this navigation button and we're going to need to show the nav bar itself so let's go ahead and do that and how we're going to do that is we're going to say uh let's see we're going to add a small hidden so that should take that away and then we'll also have our navigation here that navigation is going to be created with a semantic nav tag and then we're going to have six different links so we're going to have this one and that's going to be to the about page I'm going to go ahead and copy and paste a couple of these and create a features we're going to create updates we're also going to create a help as well as customers and then we're going to have a button and we're going to tell that button button that the text is get for free so with that we can't see it yet because the text is in Black so let's go ahead and change that to White for now using the text white class we're also going to want to make sure that we split these using Flex so we're going to flex this and then we're going to give them the proper gaps between our navigation items number one and two we have a 24 pixel Gap so we can do that using the Gap six Rule and we also they aren't quite just white there actually have some opacity to those so I'm going to tell each of these items to add some opacity to itself so I'm going to go ahead and take each of my links and say class name equals we're going to say text opacity and that's going to be 60 for 60% opacity and in order to do that we'll also probably have to add the text white class on each of these as well so I'm going to take that off of my wrapper class because I don't need that anymore but I still do need my Flex rules there and then we hover it we do want these to show up as full white so we're going to go ahead and say hover text white or excuse me text OPAC capacity 100 and that should allow that to happen and then we want to add a slight transition to that as well so we'll go ahead and add the transition class as well so we want to duplicate that to all of our other links so we'll go ahead and add this to those by just going ahead and selecting those and saying hover text opacity 100 and transition and then saving that and that should make each of our links show up with a nice little transition when it's hovered now we need to add the button Styles so I'm going to add a class to this we know that the class name the background is going to be white so let's go ahead and add BG white to that we can also tell by our design that the top and bottom have eight pixels of padding so py2 for those and then PX4 should create our padding on the left and right and then our design also shows some border radius so we can add that with rounded large and that will create the 8 pixels of Border radius that we see now one of the things I'm noticing is that this button and this text are aligned top and we don't want that to happen so with our Flex container we're going to say align Center or excuse me items Center and that will align our items to the center like we would like now very quickly we'll go ahead and look at the desktop to make sure that that is still appropriately created and what we see here is that the container that holds in in our content is actually also holding in our black background so we need to split those two out to make sure that that is appropriately styled as well so what I'm going to do is come up to the top of my Navar we can see that container and BG black are in the same div so we're going to break those out we're going to go ahead and create a new div that wraps all of it [Music] called BG black or give it the class of BG black we're going to place the ending div right at the end and save that that'll all be contained appropriately and then when we pull this desktop back out and look at it we now see that that works as it should I'm also seeing something that's very interesting I'm seeing that the container is not centered on the page so our container is aligned to the left what we'd like that to do is align to the center so let's go ahead and change our um Tailwind config to ensure that our container is always aligned to the center by saying Center true and that should align our container to the center as we would like now as I looked at my design again I did see that we actually don't contain the nav bar to a specific container we actually let it flow to the edges of the page and just give it uh some padding on the left and right so I'm actually going to change that around a little bit go back to my nav bar and go ahead and say instead of container I'm just going to say PX4 that should add the four pixels of padding that I need and that should also do allow that to grow to the full width of the page so that looks great right now I really like where that's at so that means we can move on to our next section oh I just realized when I put it back down to mobile we have a little bit of a problem we also have our navbar showing up or our navigation showing up when we should just be showing our logo and our button so we also want to make sure that this is hidden by default and then shown whenever we get to it specific size so we're going to say hidden to hide that and then we're going to say that when it is small that's when we start our flexbox container so let's go ahead and open this up again look at the tablet design okay and there we can see that we now get the Navar showing up correctly there and when we go to mobile we see that we have our hamburger icon button showing so that all looks great that means we've wrapped up our Navar and it's time to move on to the next section the next thing we're going to be looking at is is the hero section now we can see this hero section in the design this covers the title this text this button and we also have this little eyebrow here which has a cool uh gradient effect that we're going to put in one of the interesting things about this section is it also has this right here which is actually done with an oval and a radial gradient so we'll get into how to code that up when we get to that part as we move on to the tablet section we're going to be intr producing these images to the left and right of the hero and then at the desktop we'll be using those images as well so we'll go through all of that but we'll start of course with the mobile section and coding that up as its own separate component back in our code we want to go ahead and create our hero component so let's go ahead and add a components uh a hero component hero. TSX file to the component's folder and then we're just going to make sure we can uh hook that up by exporting const hero and that's going to be equal to an empty react component that just returns hero for now over in our page. TSX file we'll import that by saying import hero from at/ component hero and then we'll drop that in as the next section in our page and make sure that it shows up in our browser which of course it does so that means we are all hooked up and ready to roll with this component so what we want to do is we want to create a wrapping div for that and inside that div we want to make sure we create a container so class name equals container to make sure that the content is held in and then inside that we'll create an eyebrow we'll probably have a link for that at some point and that's going to be in two sections one of them is going to be in a version 2.0 is here so that we can split that from the other part of that eyebrow which is going to to say read more with an icon which we get to that later just so we can start seeing this in the um as it will show up I'm going to go ahead and for now just go ahead and give my hero a class name of BG black and that's just so I can start um and also text white that way we can see it to start to show up the way that we want it to after that let's move on to the other content in here so we'll have an H1 that's going to say one task at a time and then we'll also have a paragraph if we're using semantic tags and I'm just going ahead and copy and paste this from The Design This paragraph text right here and then below that we'll have a button that says get for free okay we have all of our content in there it's all showing up correctly now we just need to add all the Styles starting with the outer container so in the outer container we have a gradient it's going to go from black at the top down to a purple at the bottom so we're going to add a custom gradient like we have in the past so we're going to say BG and then we're going to add brackets to add a custom linear gradient that gradient is going to go to bottom and then it's going to go from 0000 uh which is black and then we're going to add in the other colors in that gradient from the design so those are uh we have this 2000 d42 color uh as a hex code and that's going to be at 34% what you'll realize as we go through this is that anywhere you would normally put a space in a CSS rule when you're creating these custom Tailwind CSS uh values you'll need to go ahead and add an underscore instead of that space because it won't recognize the space itself it's going to need the underscore uh in order to um translate that into an actual value and then for the last one it's going to be the lighter purple color um and that is going to be at 82% and let's see how that looks okay great so we have that that's looking great I also want to add a little bit of padding top and bottom here so I'm going to say py and I don't think we're going to use 72 but we we don't have anything between 64 and 80 so I'm also going to add a custom value for that as well for our text let's go ahead and get into the text Styles themselves so this div is going to wrap our link and in order to do that what we want to do is we want to go ahead and move it to the middle so we're going to go ahead and use flex box with uh a line uh Center or sorry I should say say items Center and justify Center to move everything to the center and then we're going to go ahead and put a border around those items as well we could we can do that with the link so I think that's what I'm going to do for now I'm just going to say class name and then that's what we're going to use to put our border and padding around these items from the design it looks like there are four pixels of padding on top and bottom and eight pixels on left and right so I'm going to say uh border just to add that in real quick uh py1 for our four pixels top and bottom and px2 for our padding left and right we also have some border radius that we need to add in of 8 pixels so I'm going to use the rounded utility and look for 8 pixels which is rounded large that works well and then we also need to make sure that our border is the right color so it looks like it's a white or sorry border white with an opacity of 30% we can say border white sl30 to make that happen in the content we need to make a linear gradient here and what we need to do is have the gradient show up um in inside of the text and how we do that is we add a background and then we clip it to the text now in order to test out this linear gradient uh text effect what we're going to do is we're going to create a default gradient using tail when CSS classes so I can use BG gradient to write and I can give some colors I can say from uh red 500 to Blue 500 and that does that and so what we need to do in order to make this gradient only show up over the text is we need to clip it to the text so in order to do that we're going to do is we're going to say um text transparent so it shows through and let me say BG clip text and save that now you can see that this is still isn't clipping it to the text and the reason for that is because we have a sort of browser uh compatibility issue with this background clip text we need to say uh webkit background clip text so let's go ahead and add a custom rule for that and say webkit background oops background clip text and save that and now we can see that we have indeed applied that accurately now as you know we don't just have two or three values we actually have a rainbow gradient here so we're going to need to replace this with a custom BG gradient rule so let's go ahead and add that in now say BG and then add on our custom linear gradient once again like we've done before and we're going to say to right and make that from a pink value which is going to be this f87 value that I've copied from the design uh We've also got an fb9 A little bit darker red and we don't have to add the percentages here because this gradient is evenly spread so if you don't add percentages the gradient will be evenly spread across the available space and that's exactly what we want to happen here so we just need to add in the colors themselves and that gradient sh should uh do what we want it to do okay so great we have that nice little Rainbow text effect there we also need to split our values uh the version 2.0 is here is bumping right up against the read more so we want to make sure that we add the proper amount of space there and the way that we do that is we can either try and add a flex Gap uh of 12 pixels which it looks like that's probably the best way to do that so let me go ahead and add we're going to make this inline Flex so that we can add that we say Gap three to add the gap of 12 pixels and that does what we want it to do we also have an icon there and I believe it's already included for you inside of assets icons so we if we use this Arrow w.svg that's the one we want so I'm going to import this into this component by saying import Arrow W icon from and go back to assets ions arrow.svg and then I can use that uh icon asset component directly inside my read more so let me go ahead and do that um I'm going to go ahead and create a span around those two so that I have some ability to adjust my spacing between the two and then I'm going to use my AOW W icon component and we should see that line up which we which it does this also allows me to go ahead and uh Flex these two together as well so I'm going to go ahead and create a class name of inline Flex for those I'm going to make sure that they are aligned to the center and then I'm going to make sure that there's the right amount of spacing between them it looks like there is four pixels of spacing so I'm going to say Gap two to add that four pixel oh sorry Gap one adds the four pixels of spacing and I think that does it for this eyebrow part of our header let's move on to the title itself now the title itself is very large as I'm sure you've noticed it's 72 pixels uh in height and it has 72 pixels in line height as well so let's see if we have something uh that will do that so we have a 72 pixel oh perfect text 7 XL does the trick just fine and we also need to make it font bold to make sure that it is showing up correctly there this also has a letter spacing so um in order to create letter spacing in tail CSS you're going to use I believe it's the tracking yes that is the one so we can use tracking tight and that should pull it in appropriately and then we want to also make sure that it is uh centered on the page so we'll use text Center to do that and the next part is just making sure there's enough space between the eyebrow and that first line of text so there's 32 pixels worth of space so we want to go ahead and give it a margin top Mt of 8 that'll give it that 32 pixels of space that we need there moving on to our description for this part of the design we also want to make sure that that's centered so we're going to class name of text Center and we want to make sure that this the right size as well so the size is going to be 20 pixels the line height is going to be 28 so let's see what rule we can use for that that'll be a text XL is the rule that we can use to make sure that that happens appropriately and then we also want to make sure that we have the right amount of margin there as well so that's also 32 pixels so we can just say mt8 there as well and get that appropriate margin the last part of this design is of course styling up our button what I'm going to do is I'm going to put it in a container just so we can get it towards the center of the page and I'm going to go ahead and give that container a flex class name to flex that we're going to justify this button to the center in order to make sure it's at the center of the page and we're also going to give that a little bit of margin to separate that from the content inside the button I want to go ahead and make sure that it is styled appropriately as well so we want it to have a background of white uh a foreground text color of black and we need need to give this some padding as well so we use py3 to give it the padding uh top and bottom we use PX five to give it the padding left and right and we also want to make sure that this has the appropriate border radius which is 8 pixels so we want to say rounded large to make sure that it has those eight pixels of uh border radius we also need to ensure that the font weight is correct so I'm going to say font Med to add that in there as well now this is looking really good so far but the one thing that we're missing is our radial gradient element at the bottom of the hero section so there's a couple things we're going to need to do to put that in there the first one is we're of course going to need to make sure that is probably going to be an absolutely positioned element so let me go ahead and create that element at the bottom of the page and I'll also make sure that my wrapping element is positioned relative so this is going to be relative and we're also going to want to make sure that there's no overflow uh happening because of course this element that we're going to position is going to be bigger than the section itself so we're going to need to say overflow we can either say um hidden or we can say clip I'm just going to go with clip for now for that absolute positioned element we need to make sure that it is the right height and width so it is a a height of 375 and a width of 750 so I'm going to make that height of 375 pixels make custom value a width of sorry let me use the tail one CSS width of 750 pixels and we're going to also at this point uh say let's say rounded full and BG black just to see it show up okay so we have that that's looking good we actually want this to be this is interesting we want this to be rounded 100% to give it the full uh just rounded value and then we want to make sure that it's actually centered there so we can either divide 750 by 2 and give it that uh left value or we can say left 50% and give it a translate I like I think I like the left 50% translate uh centering trick better so let's say left 50% and then negative translate uh in the X direction of 1/2 as well let's see if that centers it and indeed it looks like it does so we can use that as our translate values I need to look at the design to see what our values are for the border and the radial gradient so for the Border we're also using a custom value we know needs to have a border and it needs to be a border that is a specific custom value so we going ahead and go ahead and put that in there as well and then we need to insert our linear gradient or excuse me rather our radial gradient in this case so in this case we're going to say BG and give it a custom value of radial gradient and in that R radial gradient we're going to say that that goes to the closest side and that's going to go from black at 82% to a purple value of [Music] 9560 EB okay and then we need uh we also want to make sure that this is uh the correct value from the bottom of the page so we wanted to go ahead and see what that value is and it looks like it's 96 pixels from the bottom of the page so I'm going to say uh bottom and then I don't think there's a 96 but let me check real quick if not o there we go bottom 24 and that definitely doesn't work we actually need it to be 96 from the bottom uh of the page to the top of the element so we actually need to say top and we'll go ahead and give it a calculated value of 100% minus 96 pixels let's see if that does the trick and indeed it does the only problem is it's showing up over our content so let's see if we can move this div up to the top to get it to hide behind the content instead of in front of it that doesn't seem to work we'll go ahead and make our content relative that should put it on top of the content itself now this looks great on mobile but of course we also want it to look great on tablet and desktop and we know there's going to be some other things that we need to bring into the design once we get to those sizes so let me go ahead and switch over to my tablet View and then we'll see what kind of changes we need to make to make this work accurately so it looks like one of the things that we'll definitely need to do is ensure that we have a control over this text right here what we might want to just go ahead and do because we always wanted to break at a specific point is add a line break there and that should ensure that we always have that breaking at the right spot I'm also going to add uh inline Flex here and that's just to ensure that the text itself um wraps the element so that we have a way to position our absolutely positioned elements once we bring them onto the screen and then to get that to go to the right spot I'm going to wrap that in a uh flexed wrapper and that one I'm going to tell it to go ahead and position that towards the center of the page so I'm going to say flex and justify Center that'll get that back to the center of the page we also want to make sure that this text is the right size so at the at this size the text is 128 pixels as well so I want to make sure that when we switch over to the small size that we are using text uh let's see if we have a value for here I don't think we will I think this have to be a custom value oh 128 okay perfect so this will be the text 9xl at this size which that is perfect for that and we will come back to making sure that we have the arrow and the little message images to the side of this text after we ensure that everything else is cleaned up moving down to our description this doesn't change size but we do need to make sure that we have the max width that this can grow 2 so let me see if we have a good Max width value here and it has to be 448 so I think that's going to be uh let's see [Music] small 384 okay let's try a large it's going to be 512 that's too big so we're looking for 448 let's see what medium gives [Music] us 448 perfect so that will be there and then in order to also move that to the center of the screen again we'll go ahead and add a wrap around it as well with flex justify Center we could probably easily have done that as well with margin left and right Auto but we decided to approach it that way one other problem that I see with this right now is that now our um radial gradient is a little small it's a little smaller than it was before it's not taking up the full with the screen anymore so we need to make sure that we adjust the size of that uh at this screen size and it looks like that's going to give it a different width and height at this screen size so we're going to say that when it gets to the small size let's go ahead and give it a width of 1536 pixels and the same thing for a height small size height of 768 pixels let's see what that looks like when we adjust that that looks much better that's definitely doing more what we want it to do let's ensure that we also have the right spacing between the container and our button so that's going to be 96 pixels on the bottom and it looks like we also get a little bit more padding on the top so that's going to change our container itself so that right now is saying py 72 now we're going to change that to uh small py 96 pixels we might have a value for that let me check that real quick let's see if there's a value in here that's 96 we do small py 24 so that will look better there that also means that we need to bring up our uh radial gradient here as well so we have a value that is telling it to come up as soon as I can find it here we go calculate - 96 well now that is not - 96 anymore now that is minus 120 so we'll say small top Cal 100% minus 120 pixels to bring that up just a little bit more uh when we have that small screen size let's keep going by bringing in our images so we need to import import our cursor and message image so I'm going to say import my cursor image and that's going to be from assets slimes SLC cursor. PNG and then we're going to also import my message image from assets slimes SL message.png now we can use use these images and absolutely position them around our H1 so in order to do that what I think I'm going to want to do is go ahead and put them inside our H1 as absolutely positioned images what I could do is go ahead and wrap a div around my H1 I think I like that a little bit better so we'll go ahead and wrap that div that div is going to be class of inline Flex that just makes sure that's it's GNA hug right up against that H1 and then uh for that I'm going to go ahead and make this a relative uh class now for my images themselves I'm going to go ahead and put a couple of next image tags here I'm going to have one of them be the source of my cursor image and then the next one is going to be my message image we need a height for these These are decorative so we can uh or sorry we need an ALT tag for these These are decorative so we can empty add an empty alt tag for these and we also want these to show up with the appropriate uh height and width so let me go ahead and find out inside of uh figma what we want so for our cursor we want this to be a height of 200 pixels and a width of 200 pixels as [Music] well and we also want these images to be absolute so we're going to go ahead and add a class name and just make them Absolute so they just show up absolutely that's perfect and then the cursor is also going to be a 200 x 200 and it's also going to be absolute so height 200 width 200 and uh absolute on that as as well now those are great but of course they're not showing up absolutely positioned to the where we want them to be so let's go ahead and add some values to make sure that these are going to the right spots so for our cursor we're at this screen size we're going to say that it has a left value or uh from the left we want it to move over 47 76 pixels and then from the top we want it to be 108 so 476 pixels and then top will be 108 pixels let's see what that looks like I apologize that should have been right 476 okay that looks much better let's find the position for our message icon as well from the top this one will be 56 pixels and from the uh left in this case it going to be 498 pixels now I think these top values might be a little off because we are using some margin on our H1 itself we don't want to do that I think we want to move that up to here to adjust those values okay now our tops look perfect according to the design so that is great now we also need to ensure that these are hidden on mobile so what we can do is we can tell them to be hidden or display none and then at the small value we can go ahead and bring them in using um in line which is what an image would normally show up as same thing here um we say hidden and then small inline that'll bring those in at the right size now that we have the tablet view done let's go ahead and move on to our desktop view and see what changes we need to make for this particular view now I'm not seeing a ton right off hand but let's go ahead and check against the design and ensure that we have everything tightened up exactly as we want it the only thing I'm really seeing on the desktop view is that once again our radial gradient is a little small our element's a little small so we need to adjust the size of that for the larger screen so let me go ahead and slide this back in for a second so we can see our code and then I'm going to come up and adjust this to make sure that we have this set appropriately so let's say on our large screen let's go ahead and give this a width of 2400 pixels and also a height of 12200 pixels that will ensure that this is the right size at this desktop view as well so now that looks really good really happy with where all this is at now that we're done with our hero section let's move on to our logo ticker now if we look at the design right below the hero we see that we have the logo ticker and there's a title and then there are some logos as we move up to the tablet design we can really start to see that we have this fade in and Fade Out effect happening as we show our logos across the screen so that's going to play into the effect that we're going to add when we add the effects on now this section is almost deceptively simple because there is not a lot of content to it but of course we're going to have to make sure that it's styled correctly so that it works exactly as we intended to all right moving on to our logo ticker we want to create that as a component once again inside our components folder so we'll create a new file called logo tier. TSX and like our past sections we're going to export a const of the name of the component and that's just going to be something that says uh the name of the component so we can ensure that it's going to show up properly on our page and our page will import that same component and we'll put it right below our other sections of the page and it does indeed show up properly so so far so good on our logo ticker going back to the component itself let's go ahead and start adding in the content for the Picker itself so I'm going to go ahead and create a wrapping div uh that one is going to have a black background with white text and then we also want a container for this as well so we'll go ahead and create a container div to make sure that the content of this div does not touch the left and right sides of our page inside that we need a title for this and this could be semantically an H2 H3 something like that um I think it'll have to be an H2 in this case and it says trusted by the world's most Innovative team so we'll go ahead and copy and paste that text into here as well and then we also have the logos themselves this one will be a will definitely take some styling to get this to work properly but let's go ahead and see what we can do right off the bat so the first thing I'm going to do is go ahead and create a separate div and inside that div I'm going to go ahead and start creating my logo images themselves using the next image utility so let me go ahead and bring in a next image uh and I'm going to go ahead and give that a source and I don't have that image source yet so let me go ahead and grab all of my images from my assets folder so I'm going to import those up here there's actually going to be 1 2 3 4 5 six different uh images that we're going to import right here so let me go ahead and come over to assets and images and we can see that Acme is one of those logos that we need to import so let's go ahead and import the Acme logo from our assets images Acme we also want the quantum logo once again from assets images should be appropriately named which it is we're going to import the echo logo we're also going to import the celestial logo and pulse and Apex are the next two so import pulse logo from do/ assets SL images SL pulse and import uh Apex logo from do do/ assets SL images SL [Music] Apex PNG now for those what we could do if we don't want to um render them all out uh as images like this is we could just go ahead and create a map of each of these images so I could just go ahead and put these inside an images array and in that array I'll just go ahead and uh add each of these image sources and that'll allow us to just Loop through those and write the rendering code once rather than writing it six times so let's see if this works let's go ahead and create a map so we'll do images. map that's going to be our image source and we're just going to use our image source to render the next image now we CID let me go ahead and do that and then we probably will have to add some additional um attributes onto this as well inside of our array so what I'm going to do is I'm going to go to each of these and I'm going to say instead of using a just a source itself we're going to wrap that in an object and we're going to pull out this source so so that we can add other attributes on here as well so instead of image source this now becomes the source we'll add that on there as well and let me make sure next image is here it is it doesn't like that we don't have an ALT for these so we can add an ALT for each of these if we'd like as well so we can say alt so I can say Acme logo of course this is an object so we need to do it that [Music] way and and I'm seeing that I have a consistent pattern for these so let's see if we can use a little bit of IDE magic to get to speed our our workflow a little bit so I'm going to say alt and then inside that I'm going to try and copy The Source put it inside each of my alts and the only difference is I'm also going to have to find the word logo and see if I can put in some spaces so I need to find anywhere that I've written logo and then uh to make it unique I have to have it anywhere I've written that logo with the tick I can also use a command to say uppercase and there we've used a little bit of magic in order to get our images array to act appropriately let me see if we can format this okay so prettyer obviously doesn't really like putting these on new lines so I'm going to do it just so I can see this a little bit easier rather than going back and forth on one long line and hopefully prettier doesn't format this back for me and it does not that's great okay so it looks look like we have some sort of failure to render so let's see why that might be and it looks like we just forgot our parenthesis right at the bottom of our map so let's do that again and like let's also add an ALT tag because we now have that inside of our map so we can just pull out our alt and we'll say alt equals our alt great so we have our images here but now we're going to need to adjust them a little bit uh in order to make sure that they show up appropriately and one of the ways we need to do that is we need to make them uh all show up in one line so we're going to need to wrap them inside of a div that flexes them and that seems to work just fine and we'll also want to go ahead and give these each a class name of flex none that will ensure that the sizing is set by the image itself and not by the flexbox container now it looks like in our design we want these to have a height of 32 pixels so I need to go ahead and add that and I'm going to course um make sure that the width is automatically set by that height and that seems to work as I would expect the last part or not really the last part but one more part of this is we're going to need to make sure that we have overflow hidden set here so I'm going to go ahead and put that on overflow hidden and I want to separate my logos as well it looks looks like they have 64 pixels of space so I can use my Flex container to say Gap and 64 / 4 is let's find the value here Gap 16 so that seems to do the trick now I'm not going to set up the animation quite yet I'm going to leave that uh as something to come back to however there are a few other things that we need to do in this section to ensure that it's styled like the design one of them is to make sure that our padding on our wrapper container is set up appropriately it looks like that padding is 72 pixels on the top and bottom so let's go ahead and set a py and we're going to find that 72 that's not included here so we're going to say 72 pixels to give that the appropriate amount of padding Let me refresh this okay just needed to scroll down to see that and then we also want to make sure that our H2 is the appropriate size as well so let me go ahead and add a class on here and that is text large and we also want it to be text Center oh I apologize this is text extra large that's what wasn't looking right to me and then it's also uh a little bit of opacity on that white so going be text white sl70 to give it that 70% opacity we also want some space in between between our ticker and our title and that looks like it's going to be 36 pixels of space so let me go Mt 9 should be that 36 pixels of space there and that does work appropriately one of the things that's kind of hard to see in the design but it's definitely there is this effect where it looks like the image is fading off of the screen when it gets to the edge of this div and that's done uh that's done by creating some before and after elements and then styling those appropriately so let's go ahead and add some before and after elements to these we're going to say before content just empty string and the same thing for after content is going to be an empty string those before and after elements also need to be styled as uh height full and width 20 and of course absolute so we're going to say before absolute after absolute before is going to be a height of full after is also going to have a height of full and before is going to have a width of uh 80 pixels and the after is also going to have a width of 80 pixels excuse me 80 pixels not 80 also going to make this a relative container to make sure that they show up appropriately and just to see them I'm going to give them a uh background of red right now and I'm going to do that for the after as well for the after tag I'm going to go ahead and make sure that it is uh positioned right zero and for the before tag of course we want that to be positioned left Z we also want these to be at the top of this div as well so let me go ahead and say uh before top zero and after top zero and that makes both of those show up now we just need to style them uh with a gradient that goes from black to transparent so let me go ahead and uh approach the before one first and we'll say before I'm going to say BG linear gradient it's going to be two right and it's going to go from black or 00 to transparent and I can do that with rgba or even just RGB 00 0 0 0 and that should complete my background there now in order to get that to work I need to take off my red background so let me go ahead and take off my red background and see if this works appropriately and and it will as soon as I change my syntax to be correct so that works now the difference here is that this actually wasn't 80 pixels wide it looks like it was only 20 pixels wide so I'm going to go ahead and change this to width five and that'll be much more like I wanted it to look okay so we have that looking like the design now we need to change our after element to do the same thing so we can actually copy and paste this before because we're going to have the same gradient it's just going to be facing the other direction so we go after and we're going to change that uh to left and that should do the trick and of course we want to make sure that we take off our bg500 on that after as well and we're going to want to make sure that the width is also changed to the same value so now we have this nice little fade effect as the logo exits the screen if we zoom out we can see that our tablet view is looking like the design the only difference is really going to be the padding on the top and bottom of our ticker which is going to change to 96 so let's go ahead and scroll down and see if we can find the 96 value which is that one we can change that a little bit to make sure that that is the appropriate size I'll also check the text to make sure that it's the same size which it does appear to be as well so everything is looking good at the tablet size let's switch over to desktop and see what it looks like over there and the desktop view also looks on point so I think I'm very happy with where this section is going we just need to say at the small size that this becomes py2 24 so we're not overwriting the same thing so let's go back mobile this one is looking good tablet is looking good and of course desktop is looking good as well very happy with how this section turned out moving down from the logo ticker the next part is a features section which has a title of everything you need and has a couple of cards that talk about the different features of this SAS app so on the mobile uh grid it was going to be stacked and then of course as you move into the tablet and the desktop size it's going to get a little bit bigger but this should be a pretty easy one to implement so let's go ahead over to our code create a new uh section to drop onto our page and then we'll get started from there back in our code I'm going to go ahead and make this as small as possible and make sure that we can still see it and then we're going to go ahead and create a new component for this features section so I'm going to create a new file inside of components using my new file and I'm going to say features. TSX and like our other ones we're going to export const features and we're just going to make sure that we can see our features section once we import it into our page. TSX so once again I'm going to go ahead and import features and I'm going to drop this on the page using my features import now if we scroll down we should see features and I do indeed see that which means we are ready to start coding inside of our features component now for our features component uh this is going to be similar let me go ahead and actually make that a function that returns some jsx we're going to wrap this in a div it's going to have a background of black and like our other ones we're going to go ahead and set text white off the bat we're also going to give this a container which is easy enough and then we're going to start putting in our content for this particular section so I'm going to have an H2 going to say everything you need and then we're going to have a paragraph below that the description I'm going to copy and paste that from my design so that that is a little quicker to get that in place so that looks good there and then below that we're going to have some different uh features those are going to be these boxes that you see on the design so in order to do that we probably want to wrap that in div and then make three different divs now I think it's going to be a little bit easier if we mapped through some sort of array rather than creating these separately so I'm going to go ahead and create that array I'm going to call this uh const features that's going to be our feature array it's going to hold three different objects each one of those is going to have a title and a description so I can use some magic here to quickly add these I'm going to say [Music] title and description and then I'm going to copy and paste the title and description of each of these since they use the same icon in the design I'm going to go ahead and leave that alone and I'm going to make sure that we just render that same icon as we've done before so we're getting down to the descriptions of each of these I'm going to put that description in there uh the second one a little bit different toine and track your goals so that description is in there and then the third one with end to end encryption that description is in there so now we have a features array that we can map over rather than relying on our uh putting in three different divs here so I'm going to say features. map and then we're going to export some jsx here inside of that I want to grab my title and my description which is super simple and then we can create a div from that that div is going to include for each different feature um we're going to have some sort of logo up here so I'm just going to create a space for that we're also going to have some sort of I'm going to call create a semantic H3 tag this is going to house our title and then a paragraph tag is going to house our description as I scroll down I can see that that text is being added of course we haven't added any Styles yet so we're going to come back to that here in a second and make sure that all of our styles are updated but it looks like most of the content that we need for the section is on the page the last thing that really want to bring in before we go any further would be the icon itself that we want to put here so let me see if I can grab that from our assets icons and see where that is and that looks like it's the ecosystem icon so I'm going to import that at the top of our file import ecosystem icon from assets SL ion ecosystem. SVG that will create an SVG component that we can just drop straight in so I'm going to do that right now using that component here and we should see that drop straight in like our images in the last section we also need to add a ky to these to make sure that uh we uh have that for react so I'm going to put the title in there to make sure that we're not getting any uh rendering errors there either okay now that we have all that in place let's go back let's add some Styles around our text we know that we want our title to be centered on the page so I'm going to give that a text Center it is also going to have a bold font so we'll give that a bold font and it's going to be text let's see 48 pixels with a line height of one so that'll be 5 XL in tailwind and it's also going to be a little bit more compact so it's going be tracking we're going to give that tracking of tighter that'll give that the -5% that we need there moving down to our paragraph we also want this to be centered on the page so let's go ahead and give that a class name of text Center let's put some space in between this and the title so that's mt5 for 20 pixels of space there we're going to also bring this up to a larger font size text XL and we're going to give this a color of text white 70 to make it white with 70% opacity for our features we also want to give those some space and it looks like they have 64 pixels of space so we can do that with mt 16 to go ahead and offset those by 64 pixels and we also want to make sure that this is flexed so we can control the spacing in between each of these features as well so I'm going to say Flex Flex call to make it in the y direction and then I'm going to say Gap four and we can adjust that as needed for each of the features we'll also add a class name onto those so each of those are going to have a border that border is going to be uh white with 30% opacity we're also going to have 20 pixels of padding on the left and right so PX 5 and it looks like 40 pixels of padding on top and bottom so py 10 also all the text in here is going to be centered so we can just go ahead and add text Center here and that will make that centered we also want to make sure that our icon is flexed towards the center so let me give this a class of well we can either do inline Flex with MX uh with a margin left and right of Auto let's try that so let me go inline Flex MX Auto and actually that text Center takes effect as soon as we say inline flux so that's really helpful we want this to have a height and width of 56 so let's say h and let's see if we have a 56 value and we do h14 we want the same width so width 14 we want BG white and text black in order to make our icon show up there and then we want to move that icon to the center using justify Center and align items Center that will move that inline Flex straight to the center we also have a border radius so uh rounded large should give us a border radius of 8 pixels and it also looks like our um wrapping feature uh box also has a little bit of a rounded Edge to it as well so we'll give that rounded XEL to ensure that that rounded Edge is there now that we've done that let's update our title and our description our title is going to have 24 pixels of margin so Mt six to give that the 24 pixels of margin and it also is font bold to give it that bold text it doesn't look like anything else is going on that would change the size of it so we'll move on to our description our description is set off by 8 pixels so we can do that with mt2 we also want to change the color of this as well so text white 70 should change the color of that description and just lighten it up a little bit now that we've done all that let's take a look at our section and it looks pretty good I'm not sure exactly why I'm not seeing this let's see if we can increase this I'm not seeing any padding on the top and bottom of the section but that might be uh just because uh actually let me let me go back and see if we added any padding we did not on the top and bottom of the section and it looks like that padding value is 72 pixels now we ALS already found out a couple of times that tail when CSS does not include that as a value so we'll go and add that and that should stop our bottom feature from bumping up against the bottom of the page the only thing left for us to do in this particular section is go ahead and change a responsive values appropriately so let me pull this browser out a little bit switch to our tablet View and see what that section looks like as well so we can see that right away we don't have these uh in any kind of grid so we need to make sure that that happens and how we do that is we can just change change our Flex Direction when we come up to this screen size so I can say instead of flex call you can say uh in small let's go ahead and flex row and that should change our features and put them side by side the other thing is that flexbox will automatically take the content of a div and use that to decide how wide it should be we don't really want that to be happening and so at small we want to say that each of these is also flexed one so small Flex one should say that they're not going to strength they're just going to be the size that they would normally be they're each going to take up one portion of that space and then on the desktop view we're also going to make sure that these are aligned appropriately so let's switch over to the desktop view and scroll to the left and right and we can indeed see that these are looking good one of the things I don't like about the desktop view though is that our text is now way too wide so let me go back to our tablet view make sure that was accurate um which it looks think it probably wasn't so let's go ahead and add some um max width around that on the tablet view so let me scoot this back in for a second let me add a div around here that'll allow us to wrap this and make sure that it stays at its Max width so it looks like the max width is 576 so let's see class name uh Max width uh let's see let's see try large is 512 XL is our 576 okay so that's looking good and MX Auto should put it in the center just like we want now that's going to stay the same for our desktop view so when we switch over into our desktop view we're still going to see that same Max width there that's looking really good just makes that section look a little bit tighter and that wraps up our features section the only other thing we need is to add a little bit more space to the top and bottom when we get to this size so like our other sections we're going to go ahead and say py uh or say small py and then that's going to be up to 96 pixels once we get to our small size on our tablet so that's just going to give a little bit more breathing room and that looks a little B better on the desktop view as well now the only thing it looks like we may have forgotten is to change the font size as we get into this tablet view it looks like that font size goes from our 48 pixel uh text 5xl up to a 60 pixel I'm going to guess that's a text 6xl but of course we can see uh and indeed that is so that brings that font size up a little bit which it just needed for that tablet View and of course we see that same thing happening on the desktop as well so that just looks a little bit better than it did okay now that we've wrapped up our features section let's move on to our product showcase so under our components we'll add a new product showcase component uh. TSX file and we're export that const as product showcase and like our other ones we'll just go ahead and make sure that this shows up before we start working on this file let's go over to our page. TSX let's import that product showcase and let's add it to the list of components that we have here we can see that that product showcase text does show up at the bottom of the screen which means that we should be all good to start working on that component now this component is probably the simplest one that we've worked on yet it has a title a paragraph description and it has an image so we just need to make sure that those show up uh in line so what we're going to do is go ahead and start our jsx with a wrapper like we had before uh let's go ahead and just for now give this a background color of black in text white and we're of course going to include a container like we have in our other um sections and inside that container we're going to have a title which is going to be our H2 which is going to say intuitive [Music] interface and we're also going to have our description which is going to be a semantic paragraph tag and to copy and paste that from our design into that paragraph and then we have the image itself which is going to use next slash image with a source and we're going to fill in that source as soon as we have that the alt is going to be uh the product screenshot so let's go ahead and fill in that source with an imported image that's going to be located inside of assets images slapps screen.png so I'm going to import that app screen from assets slash Images slash app- screen.png and then make sure that that is imported in here now if I scroll down I can see that that image does show up as well as our title and description so now it's really just about making sure that our styles are accurate the first thing we have is a custom linear gradient but at this time instead of using more values than two we only have two values so we're actually going to be able to use some Tailwind Utilities in order to create the gradient that goes from black to purple so I'm going to say BG gradient to bottom and going say from black to and this is where I can put a custom value a custom hex code for that purple color let's do that and let's see if that shows up properly and indeed it does so that custom gradient works well the other thing that I need to do is make sure that we have a little bit of padding around that section so I'm going to say py and I'm going to use my 72 pixel padding in order to create a little bit of space around this particular section inside of my container we need our text centered to the uh Center so I'm going to say class name equals text Center and this one is also going to be text I I believe 5xl we're going to make it uh bold so using font bold and we also want a little bit of uh tracking tighter to uh bring that text in a little bit for our paragraph We want this to be uh larger so we make text XL we also want this to be centered on the screen as well and we want this to be white sl70 to lighten it up a little bit this also has 20 pixels of margin so we can say uh Mt 5 to add that little bit of spacing there coming down to our image that has 56 pixels of margin uh between this and the text itself so let's see if we have that I doubt we do oh we do mt14 adds that 56 pixels of margin so right now this screen looks good let's see how it looks at bigger sizes and make sure our responsive styles are in line as we move over into our tablet size and scroll down we can see there's a couple of things that uh aren't quite in line with the design the first one is the text size itself so instead of text 5xl at the small size this is going to move up to text 6 XL and that makes the text size the right size and then of course we also want to constrain the width of our uh paragraph description here to 576 pixels so if I do that I can say class name equals Max width uh let's see probably large not quite so it's going to be XL and MX Auto will give it um margin left and right of Auto that should appropriately move that to the center which indeed it does we also want to make sure that at this size that our um padding top and bottom is updated so py and that's going to be up to 24 and that'll give that a little bit more space on the top and bottom and at the desktop size everything should be in line but let's take one more look at this and ensure that everything looks good and indeed right now everything looks great so this is all working out well back in our code let's create a new component for our faq's section so let me go ahead and open up and create a new file uh let me try that again new file faq's do TSX and I'm going to export this as faq's uh and that's just going to be like our other ones FAQs we're going to export a text string bring this into our page import FAQs and then add this to the list of our components that we're already using right here let's ensure that this is showing up and indeed as we scroll down it is which means we can start to edit our faq's section inside our FAQ section we'll want to add a container and this container is eventually going to have oops I forgot this needs to be our squiggly brackets uh inside of our uh container this uh eventually is going to be a gradient but for now we're just going to say BG black text white and then we'll have a container in here so we'll say div class name equals container and inside that container uh we'll go ahead and add our title so that's going to be our H2 say frequently asked questions and then below our frequently asked questions we'll need our accordion items so I'm going to go ahead and have a div that wraps all of those and inside those uh we'll probably have uh once again a mapped array that will render here so let's go ahead and create that I'm going to go ahead and um create a const items that that's going to be an array and each one of these is going to hold a question and an answer and of course there's going to be four of these so let's go ahead and put those on let's go and format that that all looks good and then for these I'm going to go ahead and copy and paste the questions from my design so the first question what pays methods do you accept the second question how does the pricing work for teams the third question is can I change my plan later and the fourth question I'm just going to go ahead and type it out is my data secure so those four questions will allow us to create this we don't have answers yet I don't even believe the answers are included in the design so we could if we wanted to just add some lur myum here uh in order to create those but to make this a little bit more true to life um I'm going to go ahead and copy and paste in some text um and then I'll go ahead and make sure uh that you can see what this says so the first one what payments do you accept is going to say we accept all major credit cards PayPal and various other payment methods depending on your location please contact our support team for more information on accepted payment methods in your region for the second one how does the pricing work for teams we're going to say our pricing is per user per month this means you only pay for the number of team members you have on your account discounts are available for larger teams and annual subscriptions can I change my plan later is going to say as soon as I get this in here yes you can upgrade or downgrade your plan at any time changes to your plan will be prated and reflected on your next billing cycle and then we have one more question is my data secure and the answer to that is going to read security is our top priority we use stateoftheart encryption and comply with the best industry practices to ensure that your data is stored securely and accessed only authorized users so we have that that's working well um we have a an array but of course we need to insert our array of questions into our FAQs so we have a wrapping div that's just going to be the container for this and then we're going to say items. map and for each of those items we're of course going to want to pull out a question and answer and then we're going to want to display some js X based on that so I'm going to say div and this is going to be the wrapper for the accordion itself and then inside that we're going to have a question so this is going to be that question and then of course we're going to want an answer div to be here somewhere so I'm just going to add that now beside our question we also want to have a plus sign which is going to be an icon so um I'm going to bring in the plus icon so so let me go ahead and import that so I'm going to import plus icon from assets SL ions SL plus. SVG and that will allow us to directly use that plus icon here so in order to create do this uh properly I'm going to add a span tag around our question and then I'm going to add that plus icon beside it and that'll give us some ability to control spacing and other things that we need to control so let me scroll down and see how we're looking so far this this is looking really good we have a title we have all of our questions and answers and right now we're going to add a class name of um hidden to make sure that our uh answers are not showing just the questions now that we have our content on the page now we just need to make sure that our styles are in place and like the last section where we had a background gradient this one's also going to include a background gradient but it's going to start at the purple color the custom color and it's going to go to Black so I'm going to say the same same thing BG gradient to bottom and then we're going to say from and that's going to be our custom color we're going to say to Black for that custom color all we'll do is go ahead and copy and paste in the hex value of that and that should allow our custom color to show up there we also want to add a little bit of padding here so py 72 pixels that will add some padding around this particular section and I don't think there's anything else we need to do right off hand here so let's jump into our title our title is going to be text Center of course like we know it'll be uh 5xl for the size it's going to be font bold it's also going to have some tracking on there to bring it in a little bit and that looks good for that let's go down to the wrapper for our accordion for the wrapper that's going to be 48 pixels from the title so we can say mt2 to add that 48 pixels of spacing there and then for each of the items we want those to be flexed so I'm going to say class name equals Flex to make sure that our plus sign is uh aligned and we're going to say width full to ensure that that's there we also want our span tag to take up uh the full space or the full um space that it can so we're going to say class name equals Flex one that should grow that um in order to make sure that it takes up the full space that it can so we don't need the width full that was uh just basically to ensure that that was stretching out the whole way but of course if we just stretch out the question that will stretch out the flex box itself we're going to make sure that these are centered using item centered uh vertically and we want to make sure that each of these has a little bit of padding as well so those have 28 pixels of padding which means that we need to add py and find our 28 which is our py7 to make sure that those have the right amount of padding and then they also have a border on the bottom so border B and that border is going to be white with 30% % opacity our question is also going to be a little bit bigger than normal so we're going to say text large for that it's also going to be font bold and with these Styles at least on mobile we have this working accurately now before we go any further let's go ahead and add some rudimentary State handling to show our answer under our question if uh we so desire and that's actually going to take a little bit of we're going to need to add a little bit or a little bit of this around to ensure that that happens one of the things we need to make sure of is that instead of our padding being on our question itself we need to put that padding around the entire thing so I'm going to move that up here and that doesn't change the look of it but it will uh change how the answer shows up in relation to the question after that in order to add State on each one of these we're going to need to break this out into a separate component so we haven't done this yet let me go ahead and fold up my items just so we can see this a little bit easier and then I'm going to create an accordian item component so I'm going to say const accordian item is going to be equal to this and then we're going to return some jsx the jsx that we return is going to just be the content of this right here and then we're going to accept a question and an answer prop and then we're going to drop these right in here for typescript we need to tell this that the question is going to be a string so I'm going to say question string answer string and that enables us to use those in uh jsx to understand what those props are now to make this answer show we need to save the state of whether this accordion is open or closed so I'm going to say const is open set is open equals react. use state of course I need to bring in react so let's make sure that's in there do use State and I'm going to make that equal to false by default now I'm going to want to say if it's open then we don't want to hide this anymore and we can use do that using Classics functionality so import I'm going to P import clsx and I'm going to use this to say okay I'm going to dynamically set my class name and it's going to be uh hidden when it's closed and not when it's open so I'm going to say clsx uh hidden is going to be true when not is open and then we're not going to have a class at all when is open is equal to True okay so let's reformat that okay so that basically says yes the hidden class is going to be added when it's not open and then they're I'm going to take away that that hidden class when is open equal is equal to true now we just need to uh add a click Handler to say every time this is clicked let's go ahead and update our is open property so that's going to be on this we're going to say on click and then we can add an inline Handler that's fine for this we're going to say set is open and it's be not is open so we're going to set is open to the opposite of what the value currently is so if it's false it's going to be set the true true and if it's true it's going to be set to false so let's test this out real quick see if this works let's go ahead and click this one of these uh sorry we first have to use our accordi item uh components let's replace these with accordian item and we're going to say question is equal to the question that we're getting from our array and the answer is equal to the answer that we're getting from our array and of course we need to add a key so so in this case uh our key is going to be our question that's going to add a unique value and it says we need to use a use client directive because state only works if we're actually using a client so that's fine we can come up here and say use client that means that we're going to have client functionality like State when we access this component so let me click this and yes indeed we do see that uh we're able to see our answer show up under our question the only thing we need to add is a little bit of space so we have our answer showing up but it's nudged up right against that question so all I'm going to do is come here and say uh by default we're also going to have uh an mt4 to add a little bit of space for that component so when I open that up that's going to add a little bit of margin before it shows the answer itself the the other thing that I don't like about this is when it's open it doesn't show a minus sign we have an icon we can use for that let me go ahead and import that so I'm going to import the minus icon and we're going to take that from assets icons and minus. SVG and then we're going to replace this whenever this is closed so if it's open we're just going to use a turnery here to say if it's open we want to show the minus icon and if it's closed we want to go ahead and show the plus icon so this is is open when this is true we show the minus icon when this is false we show the plus icon let's see if that works as well and we can see that indeed that does that shows the minus icon so this is working much better now the only thing that's left for us to do in this particular section uh before we add any kind of effects is go ahead and make sure that our responsive styles are styled appropriately as well so let's go over to the tablet View and let's see if this matches the design so I'm going to scroll down on this and we can see that this is a little wide right now we need to make sure that we have a wrapper that constrains this width we can do this right here with this div right here so mt2 you can also say Max with uh let's try 5xl no that's definitely not it I believe it might even be large but let me go back to my design and ensure it looks like it's 648 so that's probably XL let me double check on this nope let's try 2 XL 672 uh okay so we can say 648 pixels here because it doesn't look like we have a tail one CSS value for that so we can add a custom value and then to get that to the center all we need to do is add margin left and right of Auto and that should put that directly in the center we also want to change the size of our title at this screen size as as well so let's go ahead and do that using a small text 6 XEL and that will change the size of that title as well on the desktop screen we can see that um it looks like the title is overflowing the space that we wanted to take up so we can do the same thing here where we go ahead and add uh some sizing here to say okay at the small size let's go ahead and say Max width and we're probably going to have the same 648 pixels here let's double check and make sure that works uh and indeed it does we just need to say once again MX Auto that'll put it in the center of the screen the only other thing I'm seeing is on the tablet view we probably need to add a little bit more space around this as well so that that py uh top and bottom needs to be modified um let's see we want this to be 96 pixels py 24 and that M gives it a little bit more space on the top and bottom and of course that's at the small size let's go ahead and add that modifier in there okay that wraps up our faq's component let's move on to the next section all right now that we've come this far we just have to go ahead and complete our call to action section and the footer so let's go ahead and dive into the call to action section let me go ahead and switch my browser over to the mobile view and it'll scroll all the way down and just like we've done before let's go ahead and create a call to action component so I'm going to call this if I can get my new file to work call to action. TSX and inside that component I'm going to say const call to action is going to be equal to our component that's going to return hello world and we're going to export default call to action okay and then we're going to bring that into the page like we have before so I'm going to import my call to action from at SL components slash call to action and then I'm going to go ahead and bring that in at the bottom here so I'm going to import my call to action function and what I realized is I didn't export this as a constant so that's why I always test that first before I dive in so that I'm not getting any weird errors uh which I did there but thankfully we were able to solve that and now we're seeing that hello world down there at the bottom let me slide this back over so it's easier for us to see the code itself and then let's go ahead and start implementing the code for this call to action so I'm going to return a div this is going to um be my section wrapper it's going to have a class name of BG black because that is going to be a black section with text white for now and then inside that we're going to have our container like we have before and inside that container we're going to have a title so uh it will do an H2 and we know that we're going to have some class there and and we're going to have a description which is going to be a paragraph and we know we're also going to have a class here and I'm going to copy and paste that from the design okay so we can see those show up and then we have a form so for this form I'm just going to go ahead and use the semantic form tag and then inside the form we're going to have an input uh the input is going to be type equals email because it's an email input and it's going to a placeholder of ymail.com and then we'll also have a uh an input submit so we can do input type equal submit or a button which I like better so I'm going to say button get access and that button should submit that form either way and we also know that these are going we're going to have put some Styles here okay we have all that so let's go ahead and start adding some more of our styles to this section we know that top and bottom we need 72 pixels of padding so we'll do py 72 pixels and we also know that for the most part the text is going to be centered inside here so we're going to say text center right out here for our title we'll need that to be uh 48 pixels so we'll go ahead and uh insert that so that's going to be font bold it's going to be text 5xl okay that creates that 48 pixels and we know that the letter spacing or the tracking is going to be tighter and that's pretty much it for the title so let's move on to the description the description is going to be text Excel for now we also know that it's going to be uh white but it's going to have a 70% opacity so I'm going to go ahead and add that in and it looks like from the design we also have a margin top of uh 20 pixels so go ahead and add that in as well as some spacing now between our form and our description we have a margin it looks like of 40 pixels so that's going to be uh mt10 to get that down where it needs to be we're also going to Define this as display Flex so that we can tell it to take a flex direction of column so that those are stacked on top of each other and the input and the button are 10 pixels apart so we're going to go ahead and add that here as a gap of 2.5 and then we just need to style up our inputs itself input and button itself so let me go ahead and add a class name here and that class name is going to have a height of 48 pixels we're going to have a custom background color here it's just going to be white with an opacity of 20% so I'm going to say BG white 20 we'll have a border radius of 8 so that's rounded large we'll have padding left and right of 20 pixels so that's going to be px5 the font weight is going to be medium and then we'll just have the placeholder text color um be what's in the design as well okay that input is looking great so let's work on our button now a lot of these Styles will apply with some inverse uh Styles as well so for here we have a class name of BG white and let's go and scroll down so we can see it uh we have text black for that uh it also has a height of 48 so we can have ADD our h12 it also has a border radius of 8 pixels so we can add our rounded large and that looks like that wraps up the styles for our mobile design okay let's make our adjustments for our tablet view so let me go a and switch over to tablet view over here and stretch that out a little bit so we can see it scroll all the way down and we know that this isn't quite right for a few different reasons so one of them is definitely the font size switches to uh 60 the title size so let's go ahead and switch that over so that's going to be at small we're going to say text 6 XL the uh description stays the same but the form itself is going to flip directions so we're going to have to want we're going to want to uh make that switch and it looks like it has a max width of 384 pixels so let's see if we can add that in as well so I'm going to say uh Max width uh let's start with medium that's too big 384 there we go so max width small and then in order to get that to the center we can just say MX Auto to give it margin left and right Auto in this case we also want to add a flex direction of row so Flex row and that's going to only take effect at the small size to get that to uh to to work well now that we have our button in this size we realize that it probably needs a little bit of left and right padding so let's go ahead and add that on as well that's going to be our uh px5 and that's going to give it the padding that it needs and then we want our input to take up as much space as it can so we're going to say uh Flex one on that and that's going to go ahead and give it that little bit of extra space so it's going to take as as much space as it can and the button is just going to be its normal default uh Flex basis it looks like the button and the um input are still uh have a gap of 10 pixels so this still stays the same so that looks like that works well and then the only thing other thing I'm going to check is that the section padding has not increased which of course it has so I'm going to say uh py and then we're going to go find our 96 value that's going to be that py4 and that's going to take effect at the small size and that looks good on tablet let's double check that we don't have anything for desktop and one of thing that it looks like we're also contending with is the fact that we have a Max width on the entire section because we're starting to introduce the uh images left and right of the gear and the uh pie chart so we need to go ahead and add a Max width to the actual content of this section probably inside of our container um so we can do that here let's go ahead and see if we can do that so it looks like that Max width is 576 pixels so let's go ahead and add a Max width of uh I don't remember medium is 448 large let's see what that has 512 extra large has 576 okay so that's what we want it to be we want it to be Max width uh EXT extra large and then we're going to go ahead and start bringing in those images on the left and the right now in order to do those what we really want is for the content itself to be uh the relative container that we put our images inside of so in order to do this I'm actually going to bound those images to this container um so what we're going to do here is I'm going to say relative and then we're going to bring in our images at the top of the file and then we'll bring those in and put them inside that container so it looks like if we go into the assets and the images folder we can see that the thing we're looking for is the Helix 2 and the Emoji star images so let's go ahead and bring those into our call to action component by just importing them in the top of the the component file so I'm going to say import Helix image from assets SL images SL Helix 2 and then I'm going to import my I don't know why it's called Emoji star but it is okay so we have those and I'm going to go ahead and call that an image as well so inside our container let's go ahead and add those in here so I'm going to say image using next image and I'm going to add a source of the Helix image for that one uh we are going to add some styles on this just to make sure we have the proper Styles there and I'm going to do the same thing for this other one so image source equals Emoji star image class name equals blank for now and it's going to have an error because we don't have an ALT tag right now these are decorative images so they shouldn't need an ALT tag so I'm going to go ahead and just uh give them an empty alt attribute okay and of course these are showing up uh as non-absolute positions so uh let's go ahead and add absolute as our first step on these and then we should see those lined up uh inside the content over our other uh content pieces for the Emoji star which is this uh pie chart here what we're going to do is we're going to bring it up by 120 pixels from the top of the content so we're going to say negative top um and then we're going to give it a custom value of 120 pixels and then for the right what we're going to say is a right value of and once again we're going to have give it a custom value of calc 100% plus uh 24 pixels and that will get it over to where it needs to be for the Helix we want it to be 24 pixels from the top of the content and 36 pixels from the very right edge of the content so for this one we're going to say uh top and then we can just say uh let's see six I believe should give us our 24 and then we want the right to have a custom value of 100% plus our 36 pixels and I apologize that should be left we don't to give that a left value because it's coming we want it to go all the way past the content uh and then 36 more pixels so that's looking good right now let's double check that that also stays true for the desktop size so I'm going to switch over to desktop and I'm going to pull out my screen once again so that we can see the full uh entirety of the desktop size scroll all the way down and yes we do see that those images are looking great we see that our title description everything is staying within that box if we want it to um everything is looking really good here right now so that wraps up our call to action section there's just one section left which is the footer and that's what we're going to dive into next okay let's go ahead and dive into the footer this is probably the easiest section we've tackled yet um so by now you should be used to what we're doing here we're going to add a new file for footer if that'll come up footer. TSX and we're going to create that export const footer and if I could type and we're going to return footer let me bring that into my page. TSX so I'll import footer in here and we'll also go ahead and create the footer at the bottom of our homepage so we can see that footer is now showing up let me switch back to my mobile view which is what we'll get started with uh so we can see most of the code here and we'll go ahead and dive into actually generating this footer so I'm going to switch back to my footer component and then we're also going to to uh go ahead and use the semantic footer tag here inside that we're going to put a container div class name equals container and that's going to hold our content and we're going to want to switch our content from top and bottom to left and right so of course we're going to have to put a wrapper around that class name equals and we'll just leave that blank for now and then we're going to go ahead and put uh our left content so that is going to be another div and then our right content is going to be another div each of those is going to have their own uh classes to style their respective contents inside the first div we're going to go ahead and put the content that we have so it's that's going to be the uh copyright and then inside the other one we're going to have a bunch of icons so we can go ahead and make this a an unordered list if we'd like to uh right here or some sort of nav I like an underw list better so I'm going to go ahead and create the antic UL tag and then each of these is going to be Lis so I'm going to have Li and then I'm going to uh copy that four times after we do that I'd like to bring in those images or those icons themselves so let's see if we can find those we have uh our inst icon uh which we can grab let me go ahead and import that one so I'm going to import insta icon from assets SL ion SL insta we're Al also going to have our Twitter icon which is going to be the xocial so I'm going to import uh xocial from assets icons xocial I'm going to import my Tik Tok icon so I'm going to import Tik Tok icon assets icons and Tik Tok and then I'm also going to import my YouTube [Music] icon from assets icons youtube.svg okay there we go we have our four icons we can go ahead and drop those in here so I'm going to go ahead and first have my xocial so it's going to be that one I'm going to add in my insta I'm going to add in my Tik Tok component and then I'm finally I'm going to add in my YouTube component in there let's double check that all those are added in accurately and indeed they are so that's great uh let's go ahead and style up the rest of the styles for this section so starting with the padding on the top and bottom looks like that's 20 pixels by default I'm going to go ahead and add that to my footer by adding a class and saying py5 that'll add the padding top and bottom I also want to say BG black just like we have in other ones and in this case I can say text white just so we can see what we have on the page but really in this section I think we're going to be using a consistent color of white with a 60% opacity so let me go ahead and try and add that in um and that'll just give us that styling so that we don't have to do that individually for all the other sections moving down the page the wrapper for our content is going to be flexed but of course we don't want that left and right we want the top of bottom so we'll do Flex call to change the flex direction to column for our text it's too small to tell yet I'm guessing it's going to be text Center but no that's probably uh yes in this in this view it will be text Center so let's go ahead and say text Center there um it's just moved it over touched touched it over a little bit but that's fine for now and then for our list we want to make sure that these icons are being shown appropriately as well so we're going to go ahead and flex this container as well uh we're going to make sure that we uh justify our items to the center so justify Center and we want to make sure we have the appropriate gap between each of our icons so from the design it looks like that is 10 pixels so we're going to say Gap 2.5 that'll put the appropriate 10 pixels between those and then between the social icons themselves and the upper text looks like that is 16 pixels so we can can add a gap to this Flex right here that'll keep the appropriate 16 pixel Gap that we need there the only other thing I'm seeing on the design that we don't have yet is our top border and that looks like that is white with a 20% opacity so I'm going to go ahead and add that right here I'm going to say border T and we're going to say border white 20 and that should add a tiny border that you can hardly see but is definitely there now that we've done that let's move on and ensure that our tablet and desktop views look just as good as our mobile does so let me switch it out to tablet pull this in a little bit just so we can just see the width of that and let's go and scroll all the way down and we do see that it's still top and bottom we need that to be left and right so at the small view we are going to switch this Flex to instead of being flexed to the column direction we're going to switch that to flex row so I'm going to say small Flex row that should put those side by side and of course at that point we also want the justify content to be space between so let's go ahead and add that as well so small justify between and save that and that looks like that's everything let me double check the sizes uh yeah that that stayed the same between the small size and the bigger size and of course the Border stay the same the Gap stay the same the icon size all also stayed the same so all that should be fine double check our responsive desktop view by switching over to our desktop view on our responsive browser let's scroll all the way down to the bottom and indeed it looks great we have everything in a container it's Center aligned we have all of our icons so those all are working really well right now as I'm looking at this these different views though what I realize is that uh on the section right above on the call to action it looks like as we get to the mobile view uh that one might not be working exactly as we wanted probably because of some style that we put in uh for our responsive view so let's go back and double check that one real quick and then uh we'll keep moving let me go back to my call to action I'm just looking at my input here so it looks like we have uh okay so our Flex one is probably what's causing our problem we want this to take up a lot of space but we have a uh height of 12 so we probably want to say at the small size let's try that yes that is when we want to use our Flex one and we'll double check that as well uh let's go ahead and pull this out to the tablet again and yes everything still looks great so that was the problem we had a uh responsive style that was causing problems for our smaller view now that we have the structure of our site done and we have uh the basic Styles applied we want to go one step further and make every section of this page come alive with some effects and the way that we're going to do that is we're going to add in the framer motion framework in order to do that let me go ahead and create a new terminal and let me say npm install framer motion that's going to install our frame or motion package and then we're going to go Section by section and create uh great effects using that framer motion package the first place that I'm going to add some motion effects is going to be in our hero section so let me go ahead and uh uh exit out that terminal real quick so we can see the code what I'd like to do is I'd like to instead of just making these static I'd like to actually make these draggable meaning that if someone comes in and and clicks on these they can actually drag them around the page that that you're seeing is normal like mac image dragging which is not what we want we actually want these two move with our Mouse and frame or Motion makes that really easy so all we do is we go ahead and import our motion div from frame or motion so I'm go ahead and import motion from frame or motion and then with that frame or motion what we'll do is we'll go ahead and take our images and we'll wrap those in framer motion divs so I'll show you how to do that we just say motion. div and that's going to give it a div that we can control with some framer motion properties I'm getting a bit of a weird error here and it seems to be because we now have some client interaction going on and anytime we do that within the nextjs framework we need to tell it that we're actually using a client component so let me go ahead and say use client up here and that should bring our site back without that error which it does now of course I want my wrapping div to now apply these Styles right here so let's see if we can uh get that to work by just moving all of our styles that used to be applied to our image let's try and move them onto our div itself uh just by adding a class name here and adding those there and see what happens now when we do that one of the problems is going to be that our image gets smaller as we see right here it's not respecting the height and the width and that seems to be because of something that Tailwind adds in to make images responsive and says the max width is 100% we don't really want that to be the case we want it to respect our height and width that we have set here so we're going to add Max width none onto our image and that should make the image show up at the proper height and width now that we have that done we can start to add some attributes to our motion div that should allow this to be draggable so let's go ahead and add the drag attribute and when we stop draging dragging that we're going to want that to snap back to the origin so we're going to say drag snap to origin and we don't want the normal Mac dragging to happen on our actual image itself which is why we're going to have to add a draggable equals false onto this image right here now that should allow us let's see if we can actually get this to work yes that should allow us to drag this around and as we can see that just pops right back whenever we drag that around it's a really cool effect uh something that is a little bit Easter egg in this site now that we've done that with one image let's go ahead and add that to the other image as well so we're going to do the same thing we're going to wrap this in a motion. div not idv we're actually going to use uh div there uh we're going to take this I'm going copy and paste that below and then we're going to do the same thing move our Styles into the motion. div wrapper so I'm going to say class name and then I'm going to put the styles that we had there before by just copying and pasting those probably going to end up with the same problem that we ran into before so we're going to say Max width of none on that as well and we're going to add the same attributes here so we're going to say this is also going to say drag it's going to say drag snap to origin and we also want to say draggable equals false here just so we're aware let me go ahead and uh comment this out just so we know what happens here so if we don't say dragonall equals false then we get that same uh problem where we kind of see that ghost get dragged around but we when we add the dragable equals false then it says okay don't do this to the image it respects what's going on with the wrapping div and then it allows us to drag this around and snap this back if you didn't want it to snap back if you actually wanted someone to be able to drag this around wherever they wanted you could go ahead and comment out your drag snapped origin uh props and that would allow someone to actually drag these around the screen and leave them wherever they wanted which is kind of a really cool effect I actually kind of like that as well so I'll leave that up to you as to what you like to do uh you can even flip these around they can go off the screen though and you can never get them back without refreshing which is interesting so let me go and flip this off as well and there you go I'm going to add my drag snap to origin back and refresh the page so that these do come back now that we're done with the hero section we want to move on to the logo ticker what we'd like to do is make all of our logos look like they're infinitely scrolling from the right side of the screen to the left side of the screen in order to do that we're going to implement once again the secret sauce of framer motion so I'm going to come up to the top of my logo ticker file and I'm going to import my motion from framer motion that's going to allow us to get started in order to to do this what we're going to do is we're going to animate this div right here this is the parent div what we're going to do is we're going to try and make the translate go from uh all the way to the uh right to the left and I'm going to I'm going to talk about this in terms of tail and CSS first so I'm going to just go ahead and demonstrate what I'm talking about so if we say translate x uh zero of course it's going to stay exactly where it is if we say negative translate X and we start to increment this value let's say one 4 so 8 you can see it's starting to move to the left if we say negative translate X full it should go all the way to to the left we're not quite getting there and that's because this div up here also needs to be flexed and we need to say that this is flex none making it respect the values of the images inside okay so we know where we're coming from which is translate x0 and we know we want to go back 100% so let's go ahead and Implement our motion. div here and we'll try and do the exact same thing and then we'll of course we'll use our motion div to animate that process so we already have motion imported let me go ahead and say motion. div here and let me have an ending motion. div as well and let's see what happens now we get that same error we had before and we know that's because we need to tell uh nextjs that we are using a client component and we're going to be doing some client side animation so in order to do this what we're going to do is we're going to set our initial property or uh initially what we're changing the values of and that's going to be translate X of 0 so that's the initial property we have and then we're going to animate two a translate X of 100% okay we see that happens really really fast we don't want that to happen nearly that fast so we're going to change the timing and all of that of our animation by using the transition prop the transition prop will allow us to uh modify y the way that the animation happens the first thing we're going to do is let's knock that duration up uh let's make that let's say 10 seconds for now so if we refresh our page we should see at least that initial translation happen at uh over 10 seconds and you can see that the timing really slows down there at the end we don't want any timing changes in this particular uh animation so we're going to say ease of linear and save that again and we also want this to happen infinitely meaning we want to happen over and over and over so we're going to say repeat and we're going to set that to Infinity that way it doesn't just happen once it's going to happen every single time over and over again and it's going to repeat so let me go ahead and refresh my page once again and let's see if this happens and just to speed this up a little bit let me switch this to five and save again and refresh and make sure that's that's happening okay so it's a very quick animation now should be happening over 5 Seconds it gets all the way at the end and then it instantly repeats so that is exactly what we want right now now to make this look like it's infinite we need to add another line of images after these first ones so essentially we need to duplicate what's happening here again so I'm going to just copy and paste this images map and we're going to add another images map after it now we're getting double the number of logos that are flying past and it's happening really really quick let's go ahead and slow this down uh let's say maybe 20 seconds and save and refresh again okay that's looking a lot better as far as the speed goes but we also are going to have a problem if we go all the way over to 100% we were translating it all the way to the left with our translate X Nega 100% but now since we have two times the number of images now we only need to go to 15 % so let's go ahead and make that happen Okay and we're getting a pretty slow change here let me speed this up again so that we can uh take a look at this and see how this is happening without waiting forever so we've got 10 seconds and let's see what happens when we get all the way to the end which is really what we're looking for so this is our ending logo here it's coming past it's going it's going we have our duplicated logos okay we've got a little bit of a jump and that's because we have a a problem with the gap gaps so the gaps are only between the images we need uh one more type of Gap and that is going to be uh padding to the right of our last image so let me go ahead and add that on as padding or sorry uh PR and that's going to be 16 to make that the same as the Gap itself and let's see if that fixes our problem so we have this is our last image here if it goes all the way to the left of the screen and it looks infinite that we know we're good and we've just accomplished that goal we see that it looks like we have an infinite scroll right now that's a great great effect that we added in there the only thing to tighten this up a little bit we can see that as the image comes out over here it's got this little gradient that's from the after uh uh part of the content that's from the after element that we added there now we're not seeing the same thing from from the before element that's probably just a zindex issue so let's go ahead and take care of that real quick let's look for our before and let's go and add a before and we're going to say Z10 just to bring that zindex up and yes indeed we do see now that looks like it's just flowing on the screen flowing off the screen this is an amazing effect and really easy to accomplish with our motion. div now that our logo ticker done let's move into our feature cards these cards are pretty static right now we'd like to add a little bit of a life and how we're going to do that is we're going to animate the borders as we hover over those borders and I'll show you how here in one second let's go over to our features section by going over to features and let's see how we can make this happen with our same framer motion tool in order to add our features animation what we're going to do is we're going to want to split each of these features out independently which means we're going to want to create a separate component and then pass in the title and description this will allow us to independently control the reaction to the mouse as we move around the individual feature so what I'm going to do is go ahead and create a new feature. TSX file and like the other um times we've created a component I'll go ahead and Export const feature and will not worry about the props for now and we'll just return feature now I'm not going to test this right now because what I'm going to do is I'm going to just basically copy and paste what's in here into my new feature component so I'm just going to do that and we can see that we want it wants to bring in we don't need a key for that it wants to bring in the title and description so we'll go and add those in the props title and description and then those uh are able to be brought in now it's giving me an error here because because this is typescript saying well we don't know if title is actually going to be here so we just need to tell it that yes indeed it is and it's going to be a string so title is going to be string description is also going to be a string and that will make typescript happy we also haven't imported our ecosystem icon into this file so we need to go back to our features grab our ecosystem import drag it into our feature component and then we have a component here that works exactly as it did uh previously so in order to use this we just need to import this into our features. TSX so I'm going to import feature into features and then we'll go ahead and use this by dropping in our feature component here giving it a title of title a description of description and we need to add a key because we are mapping over we need to tell react which feature this is as it Maps over the those individual features now comes the fun part where we actually add in the animation so what we need to do is we need to think about for a second what we actually want to accomplish and what we're going to going to accomplish is we're going to add a purple border around each of these features but we only want it to show where the mouse is so first we'll concentrate on actually adding in the border and talking about how we do that and then we'll get to actually um imp implementing the animation itself so the first thing I'm going to do is implement the border so I'm going to say div class name equals and this is going to be our border so this is going to be uh an absolutely positioned element around the whole thing we're going to make it ins set zero to make it the height and width of the uh feature itself we're going to say the Border width in this is going to be two just to make it stand out a little bit more and we're going to say border purple 400 to give it the right color and we're also going to make sure that this is relative our parent container is relative so that we can see that we want to match the Border radius of the um border of the parent so we're going to say rounded XEL here as well and that'll help us match that border perfectly okay so that looks good however we can see that we only want it to show up in one particular area now in order to create the masked effect where you only see the Border where the mouse is at we need to add a mask image rule and what I'm going to do to do this is I'm going to talk about how to do this I'm going to add add a style here and we're actually going to add our mask image and we're going to make it a radial gradient and it is going to be at uh well the size first so we're going to make it 100 pixels 100 pixels at 0 0 and then we're going to say it's going to go from Black to transparent now this is a specific webkit browser so we need to kind of add the same thing here but we need to also add the webkit mask uh image and we need to add the same exact rule so I'm just going to copy and paste what I had down here add it up here and save that okay so now you can see that we have this this cool effect going on where we have this purple order but it's being masked so that only this 100 pixel by 100 pixel section shows and then we tell the mask where to exist so the mask is existing right now at 0 0 if we wanted to move this along the x-axis we could say at 100 pixel 0 and save that and you'll see it moves over if we want to move this down instead we could put this at uh 0 100 pixels and you can see that moves it down to the left so we can basically if we track this and we say that if our Mouse position moves we update this value then um this will happen exactly as we want it to to to occur so in order to track our Mouse position what we'll need to do is we'll need to add a use effect and add a listener to the document that's looking at our Mouse position so in order to do that let's go ahead and add our use effect and I'm going to just add this when this component gets added and we're going to say window. addevent listener Mouse move and we're going to run a function when that happens so we're going to say update Mouse position now we haven't defined this function yet so it's going to give us that error there but that's fine we'll Define that as const update Mouse position and that's just going to be a function that runs whenever the mouse moves that's going to give us a mouse event so we can Define that here and we can listen to that mouse event and we can make changes uh based on that mouse event we're also going to want to say that when this uh component gets detached from the page we're going to say window. remove event listener and that's just going to make sure that we don't have a bunch of listeners that we're not using anymore okay then we can start to Define what happens when the mouse moves so basically we want to say basically we want to get the difference between where the mouse is at and where our actual element is at but we don't actually know where our element is on the page at least via JavaScript in order to find out where this element is we need to use a ref a ref is basically a Tracker um that allows you to access the actual Dom element itself so if I say uh const uh border equals use ref and then we can attach this to our border itself so we can find out exactly where it is on the Page by saying ref equals uh the ref that we've or border sorry the Border ref that we've defined now it's not going to like right now uh a couple of things one thing it's not going to like is that we've have a use effect and this is a client side uh item that we're adding in so we need to tell this that this is a client component by saying use client and that will allow it to render appropriately now it's also not going to like that we didn't set our default value to null so I'm just going to cop here and say null and that should take care of any typescript errors where we added our ref now that we have that ref in place every time the mouse moves we can actually get the position of our border versus the position of the mouse so how we do that is we can get the position of the mouse the X position by getting e X or event or mouse event dox or the X position we can also get the Y position with e.y now our border itself we're going to get by looking at the border ref so we'll get that by we'll say uh const uh the rectangle around it is going to be equal to the border. current doget bounding client wct and and this will basically give us the same thing as the mouse but just basically relative to the Border itself now we know that this could be null okay and to make Ty script happy once again we'll say HTML div element so that it knows when it's not null it's actually going to be a div okay so now to get the offset of this border versus the mouse we need to do a little bit of math and it's not hard math it's just simple subtraction but the offset or uh if we say const offset X is going to be equal to the mouse position e. x minus rect dox or we could even say border rect to make this uh more apparent what exactly this is once again to make typescript happy I'm going to put in a if the uh border do current doesn't exist or if border. current I'm just going to return that way we're not running any of this other code so this is going to be the offset in the X Direction and then to get the offset in the y direction we're going to do e.y minus our border rectangle doy okay now that we have those values now we can actually use them to create a custom mask that's going to depend on where the mouse is actually at so we have a an offset in the X direction we have an offset in the y direction now we're going to bring in frame or motion once again and use our styles to dynamically update based on where the mouse is at so I'm going to import uh framer or sorry motion from framer motion and I'm going to update this to a motion. div this is going to allow us to use some motion values so essentially we don't want this whole thing to render every single time our updated Mouse position changes and that's what motion values do they basically allow you to change Styles and things like that without rendering the entire component so instead of using State we're going to use a motion value so we're going to want create an offset X and we're going to set that to a motion value of zero so it's going to start at zero and then we're going to create an offset Y and set that to a motion value of zero as well now we already have these down here but basically we just want to set we want to change these motion values whenever our Mouse position changes so instead of setting these two variables we're just going to say offset x. set and that's going to set this value every time the mouse position changes in the X Direction and then we're going to do the same thing with the Y position offset y. set and that will update our motion value now to use our motion value we're going to want to turn this into a motion template which basically says every time the motion values change that are in this template let's update this template accordingly so what I'm going to do here is I'm going to say const uh mask image and we're going to make that equal to use MO motion template and we're just going to give it a template to update with our motion values so I'm just going to copy and paste what we already have right here paste it in right here so we have this radial gradient it's going to be the same size but now we're going to say our offset X instead of just being a flat zero our offset X is going to be offset X there and then our offset Y is going to be our offset y like so and then we can use this motion template inside of our style tag to dynamically generate what this style is so instead of that being a string we're going to set that to the value of mask image and the same thing down here just to take care of non webkit browsers mask image and we can just uh easily uh also just do that syntax so we have these both set to mask image let's see what happens when I come over and hover over my tablet view wow we can see now that we when we go around the Border it's updating dynamically based on where the mouse is at it looks really really nice now there's one small thing that we'll also want to take care of when it comes to this particular page and it's it's a very it's not even a major thing but we we definitely want to make this as polished as possible so when we refresh the page what you can see is before the mouse goes over the page we have our default values set to 0 0 now this is going to render a uh a border on each of these features but that's maybe not necessarily what we want yet because we don't want to show a border until someone actually hovers over this so instead of that let's just use 100 100 and that will make sure that the Border isn't showing yet because it's not big enough to show so that when we refresh the page we don't see that at all until we hover over it and then we see that great uh radial gradient effect this looks really good right now I'm just going to go ahead and remove a couple of these comments make sure our uh listener and everything is all cleaned up make sure everything looks good which it does which means we are now done with this effect on this section now the next thing we're going to want to do is create a product showcase that looks like dynamic that that animates onto the page in order to do that let's go to our product showcase component and look at some different things that we can do now what we're going to want to do is we're going to want to wrap this image in a motion div and then we can use something called use scroll to track the scroll position relative to that div and then we can rotate it and animate it onto the page so the first thing I'm going to do is import my motion from frame or motion and of course this is going to be a client component so since I don't want to see that error I'm going to say use client and then we're going to wrap this in a motion. diiv and make sure that that works as it should when I go down here we know that there's a couple of values that we're going to want to animate the first one is going to be the opacity of the element itself and the second is going to be the amount that it is actually rotated so uh in our motion div we're going to say the style is going to be equal two and then we can set opacity to a value so for now we'll just say 05 we'll say the uh rotate X is going to be set to a value as well and for now let's just say uh 14 for just to see what that looks like and then we also set the transform perspective to 800 pixels now we can see that that's doing a little bit of rotation we can also see that that's adding the opacity so what we want it to do is when we start getting it on the screen we want to leave it uh there and then once it's fully on we want it to be fully opaque and rotated towards us so once it's fully on the screen we want this opacity to come up to one and we also want the rotation to go to zero so it's going to go from something like 15 and maybe 0.5 that by the time it's all the way on the screen we're going to have it fully there now how we do that is frame or motion has something called use scroll to allow us to track the scroll position of an element so we're going to use that in order to set what happens when we scroll the component on the page so we're going to say const and we're going to uh just leave that empty for now equals use scroll and that scroll takes a couple of different options the first thing it takes is a target what are we actually watching and this is going to be the image itself but we don't have a direct way right now to watch this image so we also need to add that and the way that we can Target that is we can use a ref something that react allows us to do so we're going to say const uh app image equals equal use ref and that will allow us to have a Target now we need to add this ref to the image itself so let's say ref equals image ref or whatever that was named oh app image my bad there we go and of course we're going to have to say what it is so this is a an HTML image element and we also want to set the default to null so we haven't finished this so since I saved it's going to try and recompile so uh let me go ahead and add the target of app image and save that again and it should compile correctly this time so now us scroll is tracking the scroll y of the page so or actually the scroll y I should say of the image itself so let's say scroll y progress and that's what we're going to get from this target the other thing we'll want to say is is what we want to happen when specific scroll positions are reached so this is configured with the offset option and offset basically says okay when do we want this animation to start and when do we want this animation to end now we want the animation to start when the start of the image reaches the end of the page so when the end of the page reaches the start of the image right at this position as we we want when we want this use scroll listener to start the animation and we want it to end when the end of the image reaches the end of the page and so we'll do this with end end and I had too many um array wrappers there so it's start end and then end end so basically when the start of the image reaches the end of the page to when the end of the image reaches the end of the page is when we want this animation to happen now that we have our scroll y progress value that'll allow us to start to change our opacity and our rotate x value based on where the scroll position is now the scroll y progress is going to give us a number between zero and one we can actually see that if we want to by using a use effect and we can say that every time we can uh add this on here every time it changes so we'll look for uh scroll y progress. on change and we'll get the latest value and we'll just go ahead and print that out so we console.log that so yeah we're going to look at whether we're going to look at when scroll y progress changes we want to see what that latest value is so then we'll bring up the dev tools so we can see what's happening when I scroll and my image reaches the very top of the image it's going to start at uh a value uh near zero and then it's going to as it as it continues to scroll we're going to get down to one so it's going to go from zero to one as we scroll over the image now we don't need a value of zero or one we need uh values of between 0.5 and one for our opacity because we want to take it from 0 .5 and take it to one and we want to rotate X to go from 15 to zero so how we do that is we actually use something called use transform which is the way that frame or motion takes one value and transforms it into another value so we'll do that for our rotate X we're going to say const rotate X is going to be equal to our used transform and we're going to transform scroll y progress and we're going to say as scroll y progress goes from 0 to one we want our transformed value to go from 15 to zero so now we have a rotate x value that we can come down and we can put in our motion. div as this value here so instead of just having a static 15 uh degree turn we can go ahead and just put in our rotate x value there okay so let's see what happens it's not going to be a big change but we're going to see that when we start it's going to be rotated and as we scroll down it's going to go to flat so rotated to Flat is that part of the animation and it's very smooth motion uh frame motion does a great job with the smoothness of the animation I'm going to delete my use effect because we don't need that anymore and we're also going to create now our opacity value here so I'm going to say const opacity is going to be equal to our used transform and this is going to take in once again scroll y scroll y progress but as it goes from 0 to one this time we're going to want to go from 0.5 to one so we're changing the scale of that a little bit and then we're going to put that down here as well okay so now we have both of those working in tandem so as we scroll scoll down at first we're seeing a semi-opaque uh rotated image and as we scroll all the way down then we see it fully with uh full opacity and with the rotate X of zero so that looks like a really good a really good animation there really like how that turned out okay so that wraps up the animation for that section let's move on and let's add some nice buttery smooth animation to our faq's part now let's move on to animating our frequently Asked question section what we want to do for this section is instead of just having a straight showing and hiding of the question in a very abrupt manner we want to transition the answer in and then transition the answer out and of course like everything else we're going to be using frame or motion because it has some great tools for this um that I'm going to show you how to use so the first thing we're going to want to do is go over to our faq's and let's see it uses this accordion item so let's and that's up here so we have our accordion item as a separate component um which works very well for what we need and what we're going to want to do is say okay if the answer is there we want to animate it in and if it's gone we want to animate it out so we're going to use something called animate presence from frame motion let so let's go ahead and import that animate presence from frame or motion and then what we're going to do is we're going to instead of a div here we're going to make this a motion. div because we can animate the presence of motion Dives so this is going to be a motion. div excuse me I forgot to import motion as [Music] well so motion. div here and then this ending div is also going to be a motion. div okay so we have our motion. div and then we just need to say is open so let's go ahead and say uh we're going to wrap this motion. div in is open so that we can uh take it away and uh present it back to the animate presence uh component so let's go ahead and do that so we'll say is open and then we'll go ahead and put that in there and then we're just going to say animate presence around this and this is going to allow us to animate when this thing enters the screen and when it leaves the screen um we're going to make sure it's fully hidden now how we do this is we set three values we set an initial value we set an animated value which is when it's all the way in and then we set an exit value so it's going to go from initial to animate and then to exit when it leaves the screen so we're going to want to do here is say initial and then we're going to have some values there we're going to say animate and we'll have our animated value when it's all the way in the screen and then exit as it leaves the screen what it actually goes to so one of the things we're going to want to do is opacity so opacity we're going to want to take from 0 to 1 to zero so we'll go ahead and do that we'll say opacity 0o and then opacity one and opacity zero we know we also want to animate height so our height is going to go go from 0 to Auto to zero so let's try that [Music] height0 height Auto and height zero okay and let's just go ahead and see how this looks right now and then we'll adjust it as we go so let me go ahead and click this and see what kind of Animation we have so far and that's actually looking really good the only thing that I'm seeing is a slight little bump there at the end and that's because we take away this mt4 and uh when it's hidden or sorry yeah we add the mt4 when it's when it's open and we take away the mt4 when it's hidden so we need to make sure that our margin uh comes in at the animate value and then goes back away as well so we're going to say margin zero the margin is going to be mt4 is going to be margin top so let's actually say margin top zero and then we'll say margin top of 16 pixels because that's what mt4 represents and then we'll say margin top of zero again and then we'll just go ahead and take away this class name I believe yes cuz we don't need this anymore because instead of us hiding it we're actually going to be taking it completely from the screen so we're actually going to be removing this whole class name here cuz we don't need the the margin either we just accounted for that okay so let's see what that looks like out in out in and as you can see it just it's so buttery smooth the way that that transitions it's kind of amazing uh that that animate presence can work that well but it really does and I'm really really happy with how this particular animation turned out now the last part of our page that we want to animate is going to be our get instant access call to action and for this this section what we're going to do is we're just going to add a slight little uh translation to these images on the left and right we'll look at this once we do the code we'll look at this on the desktop so we really get the full effect but this one is going to just do a slight movement of up and down as someone Scrolls down to get instant access we've done scroll animation before so we already know how we're going to approach this in general essentially what we're going to do is we're going to use scroll from frame or motion and then we're going to transform that value into a Translate Y that we can then use to move these up and down and just you can kind of see what these will do we could say um for example on this Helix image I could say Translate Y and I could say something like uh 20 for example and save that and you'll see that moves down so we're going to move it uh from the negative value uh to a positive value about 80 pixels is what we're going to try and do so let's see if we can accomplish that the first thing we're going to do is move this into a client component because as you're intimately aware by now as soon as we import some of these frame or motion tools we're going to need to uh make it a client component because that's what frame or motion does it definitely uses State and things that are going to change on the client so let me import my use scroll that's one utility that we're going to use and let me go ahead and set up a couple of things that we're going to use for this so we want to see what container we're actually going to track the scroll of and I think in this case we're actually going to track the entire container or the the entire section itself so I'm going to put a ref on this top container right here so in order for me to do that what I need to do is go ahead and create that ref so I'm going to say con container ref and that's going to be equal to use ref from react and that will be an HTML development with a default value of null just making sure uh typescript is going to be happy there and then I'm going to say ref equals container ref and that will allow us to put that ref there now we can start to use our scrore y progress so I can say const and then say uh well let's just go ahead and create use scroll first we'll have a Target and the target is going to be the container ref we're going to have an offset and that offset is going to be those two values like we saw before and it's going to be uh basically when the end of the page reaches the start of the container so I believe that's start end and then when the end of the page reaches the end of the container is when we'll stop that so let's do end end pretty sure that's how that works and then we'll use uh scroll y progress from here and that'll give us the value as we scroll from start end to end end now we can double check that this is working how we want by using a use effect to actually look at that scroll y progress value like we've done before so we can say scroll y progress. on change and we'll grab the value and just console log it and we'll bring up our inspector developer tools again and let's go ahead and see where we're at okay that seems accurate so we should go from the top to the bottom and we should see things move that looks really good and then we're also going to want to use a used transform and of course since we're going from 0 to one we want to transform that to a different set of values in this case I'm going to want to transform that from 80 to 80 so I'm going to say const Translate Y and we're going to use transform from frame or motion and we're going to track the scroll y progress and as it goes from 0 to 1 we're going to go from 80 to 80 pixel okay so we also need to wrap each of these in a motion div in order to get these to show up the way that we want so in order to do that let me go ahead and test this with a first motion div so say motion. div here and most likely what we're going to do is actually make the div itself absolute and just put the image inside of it so let me go ahead and do that ah we don't have motion on the page that's fine can certainly do that let me scroll back down and let's just try this without it and we'll we'll do it if we have to so we're going to say style and it's going to be equal to and we're going to have a Translate Y value and if we do it with that syntax let's see what happens okay we actually are seeing that move which is really nice okay so we didn't need our motion div to have the absolute value which is fine um we can also put the same motion div wrapper around the Emoji star and then those can move in tandem so I'm going to say style once again equals Translate Y and I'm going to wrap that around my star image now those are moving along with the scroll position okay so let's get a desktop view of this let's see if we want to adjust this at all so I'm going to pull this over into desktop and just push this over back a little bit so we can get a better view okay so as we scroll it's definitely smooth it's definitely obvious as well what's going on but it feels a little too intense for what I'd like on this particular page so let's see if we can make it a little less intense so let me go take my this from 80 to 80 and let me actually go from well actually let's try and go from 80 toga 80 so we'll go from top to bottom a little bit more that's kind of a cool effect it's a it's still a little intense so let's go from let's try 40 to - 40 and that's a little bit of a better effect it still gets your attention but it's something where you're it's it's not going to be like this jarring effect so it's nice it's smooth that's a great effect right there okay so we now have all of the animations for our entire page done so let's go over what those are again real quick just so we can see them all working in tandem so we know that we can drag this around we have the ability to do that that'll pop back into its position we have our animated logos here as we scroll down the page we can also see that we have this cool border effect going on it's almost like a light from the mouse is shining on the border that's really great we have some opacity and some uh turning of the image here as we scroll down into our product showcase we have our FAQs that just look so buttery smooth when you open them up they look so nice and then we have these uh images being animated with our scroll position all this done with framer motion effects all this done actually really easily for what we're actually accomplishing on this page so this is this turned out really really well

Channel: Frontend Tribe

Views: 11,059

Keywords:

Id: 4k7IdSLxh6w

Length: 184min 10sec (11050 seconds)

Published: Sat Jul 06 2024