Build a Dark Modern Animated Website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScript

you are done making boring websites today you are making a site that is gorgeous like this and dark polished and modern like this this website trend is exploding so you should learn how to build a site in this style you're going to land more clients and job opportunities if you know how to build modern websites that follow the latest trends I've studied dozens of these trendy new sites to break the style down to its Essential Elements and then I crafted a brand new site for us to build this is the website for glisten AI a design tool that has this captivating modern branding we've got hero animations like raycast scroll effects like linear glassy borders and gradients like slick line animations like particle gradient text and flashy buttons like off kit and bento box cards like well pretty much everyone this site will impress people and look Stellar in your portfolio for years not only will you build a flashy new site but you'll also learn several popular Technologies we're using nextjs and react for a framework prismic for our CMS and Page Builder Tailwind for our CSS styling gap for performant animations typescript for safe reliable code and we'll host it all for free on versell other tutorials show you how to make a UI but leave you without a CMS to manage all that content it's like giving you a car without an engine in this course we'll easily hook up our CMS and get a headless page builder that updates with live editing you can then pass this site to content teams and marketers allowing them to independently publish new pages with ease we'll build six of these page components that can be reused and rearranged to build tons of different pages so let's take a closer look at the final site and each component will'll create in this course when it first loads each element in our hero animates in smoothly the brand uses this star icon here so we have a grid of stars in the background that Ripple in from the center after the image loads we get a nice glow that comes from in from behind it I'll show you how to style all of this with tailwind and then animate it with gap when we hover over the button in the center the color changes and we get a slick glow and pulsating effect for this we're just using some clever Tailwind classes next is the Bento Box grid here we're adding a subtle gradient to some parts of our head where it punches up the text a bit we're using CSS grid and sub grid on this component so if you haven't used sub grid yet you'll learn how to use it and why it's useful each of these Bento items has our glassy border to keep them on brand and on mobile this grid shrinks down to just one column so it looks great anywhere next we've got a great scroll animation on what I call our showcase component at first it's behind some cloudy glass so it gets a little blur and as we scroll down our text slides out from behind the glass and if we go back it hides it again gap's scroll trigger plug-in makes this a breeze and I'll show you how that's done we also have an image that's offset to the left with an icon and text and a button at the bottom on the right plus we're going to make a variation for this component that flips the text to the left and puts the image on the right your content team will be able to choose which one they want to use our next component highlights and links to case studies on companies using and loving glisten AI the link has a subtle hover animation and alternates which side the image is on as you add case studies with this component we'll focus on learning how to create and fetch content from other data types within prismic and we'll also build a case studies page that I'll show you in a moment our next component is our most complex animation but it's still just a couple of timelines that I'll walk you through to show how glisten is the center of a rich framework of Integrations we have the glisten logo pulse a signal shoots out on either side and each logo lights up before fading out again each of these logos are selectable in our CMS so your team can change them out as they need to we also have an SVG background with these Arrow shapes and there's a gradient background even behind that so you're going to learn a few cool techniques on this one and last but not least we've got an essential component this is our call to action we've got a glow in the background our company logo with a glassy border here a heading and our stylish button pretty simple but a must-have for a site like this and of course we've got our footer here and we've got a header at the top and yes the entire site is responsive and has a mobile nav last but not least let's check out that case studies page if we click here here's the Nike case study and as you can see we're reusing the Ripple star grid from the homepage looking at the case study itself the typography is really nice and usually that will take a long time to get all the values just right but instead we're going to use the Tailwind typography plugin the plugin will give us beautiful line Heights and other values right out of the box we don't have it here but if you wanted to add bulleted lists or lots of other typical elements those would be styled in a really beautiful way as well so the typography plugin gives us a lot for a very little amount of work now that we've seen the site let's go check out what that looks like in prismic itself so here we have prismic and this is the homepage that we're looking at and we can see how this slice here corresponds to to the hero so we have our hero we have our Bento we have our showcase our case studies our Integrations and our call to action that thumbnail is a little big but that's fine and the cool thing about prismic is that as we uh edit this so if I want to say designs that are awesome you see that it it updated live as I typed right over here so it's a really nice thing that we're using a CMS that that gives you this live preview so our content team can know exactly what their site's going to look like like we even have a preview the page feature that we will set up and it's it just makes a really wonderful editing experience for any kind of content team so we're using prismic for our CMS and we are using nextjs for our actual framework next is an incredibly popular react framework used by huge companies and it allows you to build really great web applications and websites all by using react components next is going to handle a lot of things like image optimization and routing and other things for us we're also going to be using the new app router uh the pages router is kind of the old way of doing it we'll be using the newer app router so if you're not familiar this is a great way for you to learn how to build with the app router we'll be styling our website with Tailwind it is a utility first CSS framework and you have a bunch of these individual utility classes like Flex that adds display Flex to your elements and we're going to be building everything out through Tailwind there be a couple small parts with just regular CSS but uh for the most part it's going to be a Tailwind built website and at the end we're going to be coming through with gap to animate all those lovely animations that you saw we're going to be using timelines and scroll trigger and lots of other things uh it's not going to be too too heavy on animation as you saw there's only a few um animations throughout the site but you will learn a bit of Gap and especially how to use it with react and with nextjs which is something that uh a lot of people don't really know so you'll get get the benefit of that and throughout the course we are going to be using this notion document that has a bunch of things added to it um we have some assets some links to documentation if that's helpful uh there make a couple components that we're going to copy from here because they are like big big svgs that we're not going to type out would be a pain to get otherwise uh and there's also some extras here so make sure you check out this link in the description this is going to be something that we're going to return to and we're going to start off by getting the assets in in just a minute also if you have any problems throughout the course uh or if there anything that needed to be fixed I can't update this YouTube video but I can update this notion doc so please check here to make sure that uh you know if you're running into a bug or there's something wrong with the code or something has been updated that I will put a note here and you can get that correction that way so the YouTube video will stay stay the same but this doc will be updated so let's not take any more time let's head to prismic to get started we're actually going to start from prismic if you don't have a prismic account yet go ahead and sign up if you don't have an account you'll see something like this you can sign up with either it doesn't really matter once you're logged in head to your dashboard and you should see a page like this here I'm going to create a new repository and I'm going to choose the framework of nextjs and here we're given three options and it says ideal for new projects ideal for exploring or connect your own web app so if you already have an app or if you want to start from a brand new nextjs project that you have you can go ahead with that one this has a whole bunch uh to it that would take way too long for us to clear out so this minimal starter is just the perfect middle ground for us so we're going to go ahead and select this now repository name this is just what you want your project to be called does not really matter I'm going to call M glisten AI just like that that this one that be taken so add your own but you can call yours uh GL a for the display name because that's that doesn't need to be unique um you can leave these two the same because that's what we just selected and you will use the free plan and create your repository all right we're dropped in and it asks what the what's the main language we want to write in we go English or you know I'm choosing English you choose whatever you would like uh and it has a quick start guide here so it says launch your starter your starter has everything you need to get started including prismic development tool slice machine run this command to download and install your starter so we're going to copy this and go to our terminal so I'm in my terminal and for me I like to put my uh different projects in the Repose folder it's just a a folder that I have on my hard drive and I'm going to go ahead and run that command okay it asked me if I want to install I hit yes or why all right so what did that just do we we we just ran this command but what exactly is it doing so that is creating the nextjs starter prismic minimal typescript version on our computer it's connecting it to the glisten AI repository and as you see it goes through it knows that it's using next so it starts to add some packages that are next specific it installs those it connects to the glisten AI repository uh it configures slice machine it logs me in uh it syncs all my data and it initializes the project and we have a nextjs adapter set up so now it says do we want to run slice machine we could but right now I'm I'm going to say no and we are dropped back to the Repose folder so instead I'm going to CD into my glisten AI folder that was just created and I'm going to uh I use VSS code and I'm going to be using vs code throughout this tutorial so I I have this set up so you can go code period because I'm inside the glisten AI repository if this doesn't work for you you can go ahead and just open up vs code and open this folder manually um but as you see you can see I'm inside glisten AI um you you could also just go to Open folder and find the folder that you just installed and I'll type mpm run Dev right in that glisten AI folder make sure you're in there otherwise this will not work Le it won't won't work in the way you expect so uh what is happening now is we see this concurrently npm next Dev npm slice machine because we're using this minimal starter what we've done at prismic we I've set up two things to run it at the same time we are going to run npm next Dev which is the nextjs server as well as slice machine which is the developer tool for prismic that we're going to be using a whole bunch to create our slices those you know the the hero component the Bento Box component the call to action component um slice machine is going to be the tool that we use locally to build those components out so we can see here we have two servers up and running we have Local Host 3000 and Local Host 9999 9999 yeah uh so I'm going to control click on Local Host 3000 and that should open it up in Chrome browser here it doesn't matter if if you're using Chrome or not you should get something like this so it's should say welcome to your new website and it's just a simple one slice here that has some information and you can see that there is a different page if you click on this one it will load another page and you can go back to the homepage so this is our site up and running very minimal at first um and then we also have slice machine if you click into Local Host 9999 you get this I I have glisten AI here and you should have a page you shouldn't have any custom types yet we we will create one and you should have just one slice it's this Rich Text slice here so we just want to confirm that everything is running that we have our local host and our slices I'm going to drag this over here here because these are the two things I'm going to be using the most so now that we know that our project is up and running let's actually take a look at what was installed here we have our dependencies we've installed prismic client prismic next prismic react as well as slice machine adapter next and slice machine UI these are the prismic packages that uh we will be using both to locally develop and as well as to fetch our data and to do things like make previews so that your content team can see things before they're published and also to uh do things like render Rich text and images and things like that these are types that are for typescript we have of course nextjs react and react Dom and yes there is typescript we are using the source folder with nextjs so here we have our app folder like I said we are using the app router so we have everything inside our app folder and then here is the slices folder outside the app folder and this this is where those slices like hero uh are going to be put so right now we just have that rich teex slice as we build each one out this will fill up and we'll put uh lots of our stuff in here then inside app we have both a layout and a page file so the layout is going to wrap around every page that is inside this folder so this is going to be where we put our header and our footer this is also where the prismic preview goes and and everything else goes in this nice little middle sandwich here and then here is our page that's going to be kind of the default homepage and you as you can see it is fetching the page that is home and it is querying that data from prismic so that nothing is hardcoded and it is all coming in uh from from our CMS and all of this is already set up for us the slice zone is a very important uh component that we will get into a bit more but basically this renders out the slices that we have in our project like here on the prismic homepage that I showed you earlier these slices get sent to that slice Zone and the slice zone is what is in charge of rendering those out basically gets this array of slices and matches each slice with the proper component and you don't have to handle anything this is all handled for you here under uid we have page. TSX and this is very similar to the page that we saw here except this allows your content team or anyone using the CMS to create a brand new page without having to have a developer come in and create more files this page takes in any uid coming from prismic and basically renders out that content once again using a slice zone so prismic is very versatile in that you can create Pages within prismic without adding any more codes so so once again your cont cont team can just build and build and build and never need to bother you you get to work on a lot more fun stuff all right so I'm going to close out of this uh that that was the finished version of of the CMS I'm going to come to the uh brand new project that we have within prismic so I launched my starter I did run that uh and I ran my project so my project is up and running that's done edit a page I haven't done that should be able to refresh this page and yep here we go another page and homepage I'm going to close out of this quick start guide and it'll be right there for us but don't worry I am your quick start guide you don't need that so we have homepage and we can see that uh yep we will set up the visual editing experience very soon it is one of the best parts and I already already showed you a little bit of that um but as you can see welcome to your new website that is right here welcome to your new website let's remove this and say hey if it's me say hey it's Alex and publish I just hit save and publish and then in the homage if I hit refresh there we go hey it's Alex so we can see that we are already wired up to a CMS we didn't have to do any fetching any looking at the data I didn't have to figure out what this object looks like just like that we are already wired up with a very simple slice yeah but at the same time it is something that we had to do just about zero work to wire up and we can put all kinds of stuff in here I can go ahead and uh use a heading one uh hello uh and I can do a bulleted list or what whatever you want here it's it's very similar to the way that notion is if if you're familiar so I just want to kind of show you that yeah we we are wired up hello world and hit save publish all set there now live editing here is really best when you have your site deployed but we can go ahead and kind of hack into that right now so what I'm going to do is I'm going to grab my Local Host 3000 and I'm going to come here I'm going to say get the live preview uh yep there we go so add your url to set up live editing so it says uh your website url.com slice simulator and Page thing in Local Host 3000 oh it added slice Simulator for me perfect and so I'm going to hit save yours should look like that uh no s here just in case you're typing it by hand but Local Host 3000 slice slicey simulator go ahead and hit save and we should see a little tiny hello world over there so it's actually rendering the slice live so you can go hello world and you might be able to see it on my screen I'm not sure it's really tiny but um it is rendering that live it's it's using my code in my project because I'm telling it to check out Local Host 3000 now this will break if you stop your server uh when we deploy this live to the internet and it's it's on verell it's not going to break like that but right now we're just in in development so if this is saying error it's probably because you've stopped your server it's not because prismic is broken all right now that we saw prismic a bit more let's go ahead and install Tailwind CSS for our Styles and the font we're going to be using on this site right I'm going to start or I'm going to create another terminal window here I'm going into glisten AI just cuz I would like to not stop my server every time I want to install something so I've got one right next door it's the same folder and I'm going to go ahead and install Tailwind now to do that let's head to the Tailwind docs we have docs here and I do want installation but I want to use a framework guide so I'm at tail1 CSS docs installation framework guides and right here we have a nextjs framework guide so I'm going to follow this we already created our project you can skip number one number two install Tailwind CSS I'm going to copy that first line paste that in it's going to install Tailwind post CSS and auto prefixer great uh and then tailin CSS init or npx Tailwind CSS init hyphen P don't don't uh type it just go ahead and go to the docs and copy paste it and what's that what that's done is in uh created this Tailwind config.js down here uh and we will be tweaking this a little bit because as you can see it's currently empty and we need to go ahead into tailan config.js and add some module exports so I'm going to go ahead and copy this content bit right here and replace that content block there just like that now uh they have created one that is is uh kind of guessing at what you shape of your project is and it says or if you're using the source directory we are using the source directory so ours is going to look a lot more like this so we can go ahead and actually delete the first three just like that and you're going to right after Source hit a slash and type app just like that all right and if we click at the end of the line it can command C and command V we can create uh three lines like this so we're going to type components and we're also going to type slices we will be creating those files or sorry those folders very soon uh or we we already have the slices folder but we will be adding components shortly this just tells Tailwind where to look for our classes so we need to make sure that it's searching within the app folder within the components folder and the slices folder go ahead and hit save and down here it says add the Tailwind directives to your CSS so I'll copy that and I will come back here and under app I'm going to create a new global CSS file and just drop those three lines in there hit save but right now we are not importing this anywhere so we need to make sure that these lines get imported into our project because this needs to get imported on every single page we're going to go into layout which gets brought into every page and type import slash and global. CSS just like that all right so you'll know if it worked if the styling on your H1 or whatever you have here completely goes away and you kind of stuck with uh more bland styling here that's part of what Tailwind wants to do it wants to reset everything that's what the base does it just wipes out all of the default styles that you can build up from that so if you start seeing tww here or you can check it out by actually going here class name and doing like something like BG red 500 save that and if your website turns a bright red uh it is working now if it's not working what might have happened is that your terminal didn't update so you you might need to actually stop your server by hitting uh command C or control C and then start it up again now that we have Tailwind up and running let's go one step further and actually add something that's pretty wonderful to this setup go ahead to the notion do that we have uh the gold icon is for the notion do the blue one is for the finalized website so go ahead to the gold and grab the Tailwind prettier Plugin or you can just search on Google for Tailwind prettier plugin and you will get this blog post and grab this Tailwind prettier plugin basically what this does this automatically sorts classes based on their recommended class order go ahead and copy the code right here npm install go to your terminal I'm going to go ahead and actually stop my server cuz that might cause some problems I'm close that second Tab and that'll install great it's installed and then I need to add the plugin to my prettier config which we we we need to create a prettier config.js so let's go ahead and set that up so prettier we have a prettier or a prer ignore but we need a prettier. config.js so going to right click in the root folder and type prettier. config.js just like that paste that in and and that's all we need now uh we will see that as we type in our our Tailwind it'll rearrange and yours will look just like mine because it's the same order all right once that's set you can close it and I I know it's been a whole lot of setup we only have a little Hol world we have one more thing to do before we start creating slices and everything uh we need to add our font DM Sands so um we need to figure out how to add fonts to next shap JS so you can go to the doc that I have adding fonts to nextjs or once again you can search for just adding fonts to nextjs we have the docs for adding a Google font and here they're using the example of enter and we can copy a good amount of this code over so I'm going to copy the import enter from next font Google and it's telling me right where to put it uh in my layout. TSX so right here in layout. TSX I'm going to drop that right there but instead of enter I'm going to remove that and if I hit uh control or command space you'll see that it shows us all of the Google fonts that we have access to and I'm going to type dmore Sans and there it is DM Sans just like that and now it says if we're loading a variable font you don't need to specify the font weight and yes DM sand is a variable font um and so we don't need to specify but right here we have with Tailwind CSS so I'm going to go there because that's what we are using and it has this different example where uh it actually has a variable and this is is going to be a CSS custom property that we're going to be adding to our Tailwind config so go ahead and copy it from the Tailwind CSS part uh we we could have copied it all but like they're using two fonts here so it it's the same uh so go ahead and copy const enter and we're going to paste that down here and instead of enter we're calling DM Sans and instead of this we're call we're going to just name it DM sand like that uh font DM sand so make sure you just swap out the inter parts and we don't need robotto mono that's if we're using two fonts and down here we see that we have class name inter. variable so we're going to be copying that we you know we copy copy the whole thing we'll just remove the robotto mono variable part um you know what actually we don't even need the other parts we can just say class name equals intervariable so go ahead to HTML class name equals and we're need to use curly brackets type uh DM sands. variable just like that and it's going to be referencing this so now hyphen font DM sand just like that if we copy that we can use that in our Tailwind config so if we see here uh scroll down to where it tells you to add it to your CSS Tailwind config theme extend font family Sans mono so let's check out our Tailwind config so we have theme extend and and then I think it's font family yep let's go ahead and sanss and we see VAR font enter like that going to do VAR font DM Sands lot set up but uh that should be exactly what we need so let's check out our homepage do we have a different font setup ah I was wondering why we didn't have any update here still the same font that's because our minimal starter actually does come with a little bit of styling so let's go into our Rich Text slice and you'll see that there's an index module and that's what's stopping us right there so we go ahead and remove that uh we we we can delete that file in just a second uh but we see it's subtle but the uh the font did change we can confirm that by inspecting and seeing it is now DM Sands cool uh and we can go ahead into index. TSX and we're actually going to rip out this uh and and inside the r text folder going to rip out that class name um the rest is good there and we can remove this Styles part here as well the rest looks pretty good um yeah all right so now we have no styles that are leaking in there go ahead and delete that index module CSS we're not going to be using any CSS modules that's just for that default slice and now we are up and running all right so what we're going to do first is we are going to build out the header and the footer as well as part of the layout for this site so we got the header with some links over here and we've got our footer so to do that make sure your servers are up and running and we're going to go into slice machine that's running at Local Host 9999 and we're going to come in here and go to custom types uh because we're going to create a settings custom type so go ahead click create and this is going to be a single type you see like side menu testimonial author is for reusable but uh we're making making a global nav slf footer single type so it's going to kind of take care of all of those things and so we'll just call it settings and we'll hit create and we get that it is saved successfully so this is where we are able to add fields to build out this settings custom type go ahead and add a new field and we're going to come down here to key text and we're going to call this site title and click add we're going to add another field the button now up here so we're going to do another key text and call this meta description click add and these two are going to be used for our SEO purposes and for uh the title and everything at the top of the page next we're going to create an image that will act as a fallback for the OG image fallback OG image just like that so individual pages will be able to have their own OG image but this will be a fallback for the whole site now we're going to get into actually creating the navigation part so we're going to create a group right here up at the top choose group and inside this I'm just going to call this navigation and inside this we're going to add field so you can see a a group is something where we'll be able to create instances of this and I'll show you this in prismic once we push it it'll it'll make a bit more sense um but each of these there's only going to be one site Title One description one image here and then anything inside this group we can repeat but each of the three are going to repeat so add a new field and we're going to click link and this will be called link and this is just what uh each of those links will link off to uh and then we're going to choose another field for key text and this will be the label just type label hit enter and then last we are going to determine whether or not the uh the CTA button style here gets applied to the link so we're going to actually add a Boolean for that uh we have the boole right here it's just a true false kind of thing and this is we're going to call the CTA button just like that and the great thing about working with slice machine is that everything is autosaved so we don't have to worry about any of that uh right over here we have review changes and we can click on that and we see that we have a new settings type we have this types one we can go ahead and push those changes that's going to push it up to prismic and all slices and types have been pushed so now we can head to prismic doio in our uh repository and we can click create new and you see it gives us the option of do you want to create a page or do you want to create a settings document because we haven't created a settings document yet that's what we're going to do we're going to call this site glen. aai in The Meta description you can just type a cool site for now we we'll get that information later uh fallback OG image we can fill in in just a second but I I want to show you the navigation here where this is how a group works we have an individual item that is built out uh as as a default right now and we we're able to add more items to that group you see each of those fields gets added each time I add a new item so right now this would be three links and each of those links uh has you know it's it's confusing because it's it's a link with a link field I I get how that can be confusing but um each of these three Fields will be added every time we add one of those right now we don't need to add any any of those really I'm just going to hit save uh with the title and the description is fine for now and I'm going to give this a name of settings just like that uh this name doesn't change anything on the actual site uh this is just for organizational purposes so that you and your content team can see uh what that page is called and you'll see that it says settings right here and I just wanted to come back here to show that we do in fact have two pages already as we showed before uh the link to the other page this is that another page we can change this later um but we'll just call this features right now so uh this is going to be the slug for this page so as you navigate around um you'll be able to to to go to SL features and get this page so I'm going to call this features and let's just call this cool features uh this is the title that will uh appear at the top of the page here um but I'm going to click save and oh and we actually go to the SEO on metadata and say uh features as well as uh you know glisten features we will come back and and edit some of this the features page I'm not too worried about this is really just going to be a placeholder for the most part um and you can leave the fancy roller skating person but if we go ahead and save and publish this and change another page to [Music] features that automatically saves you see it title has been saved saved we'll go back and now in our settings uh file we can link to that features page so I want to choose a link type I want to link to a prismic page and that allows me to then choose any of my documents uh really I just want to link to one of the pages the settings file is not going to have its own URL uh but we could link to the homepage or to the features page I want to do features page I'm going to call it features and this TTA button let's leave it false for now I'm going to also add another item just so that we have uh our Button getting used but if you actually look at this site uh it's linking to the same page in both instances uh because we're not going to build out a whole bunch of different pages for for this example site you will be able to on your own but for the sake of this course we are just building out the basics we're also going to link to Features but we're going to label something different of get started and CTA button Buton will be true so that it gets that cool styling and now we hit save and publish and no change happens back on our page because we're not actually doing anything with our settings file yet we're still just saying hello world so let's dip into our code as we said we want to work on our header and footer so here in the layout is where we want that to show up uh we are going to be using a couple of plugins to help us throughout this course so as I create components it's going to be a lot easier if you also have these plugins so let's dip into that super quick so in extensions I have a great react Redux Snippets um extension and here so it's es7 plus react Redux react native Snippets uh so this one's going to be really handy I'm going to show you how to use this in just a second but while you're here installing uh extensions go ahead and grab Tailwind intellisense should come up there you go grab this one as well it's going to really help uh us see the values of each of these classes and it's going to just be huge huge assist don't do Tailwind without one of these extensions so back in our source folder we want to go ahead and rightclick and create a new folder called components told you we would build that uh an in component going to create a new file this one's going to be called header. TSX CU we are using typescript now in here as I said we are going to be using that Snippets package so type our FC uh and hit Tab and it just like that creates a nice little component for us it doesn't do a ton for us but it is nice not to have to worry about that you can go ahead and remove the import from react because nextjs doesn't need that it takes care of that for us so it's it doesn't save us a ton of time but at the same time I just really like doing RFC rather than having to type this out so go ahead and save that and then we also want to create another one that's just called footer and do the same thing RFC for react functional component there's lots of different ones that you can check out the uh Snippets has a whole bunch of them it it depends on what kind of function you want to create I like RFC that's what we're going to be using or moove react and there we go so we have our header and our footer we can go ahead and import them right here so inside the body above children I'm going to go ahead and start typing header and you can see it starts to recognize ah you you have a header at at comp components header I if I click that or hit enter it will import it just like that I want to close header and right here under children we're also going to put our footer in the same way we can go ahead and import it from components make sure you close it and we are set there and around children I want to wrap that in a main element so it's nice and semantic and there we go so you should have header main children and footer let's check out there we go we have header hello world footer and we we're seeing header come in because those components automatically just return a div with the name of the component that's the nice little thing about RFC it's built out for us so we see that our header and our footer get added to our page just like that because it's in layout now one last thing we're going to do before we actually build out our header and footer is we're going to grab the logo that we will be using on the site so this little logo is going to be inside the documentation we have prismic docs down here here uh or or or not the documentation but inside the um notion doc that I've provided to you so this is the word mark. TSX if you copy this and I even have the comment here that shows you exactly where we want to put it and what we want to name it so if you go ahead inside your components and name it word mark. TSX and paste that in we should be in good shape and so I'm not going to go through what this is is this is just an SVG which is a type of image that's been exported from figma and compressed and everything and has some values in there so this is the logo that we can then import into our header and into our footer so if I just come in here and we say word Mark just like that I'm going to import that I I do like changing even though they're right side by side I like changing this to at components just like that or at slash components just in case in case we ever move header into something else this makes it so that uh the Imports never going to break and then make sure you close your word Mark and save that if we check out our site we should see yeah it uh we that's white on white so that's that's why that's happening um but if we go ahead and copy that same thing to our footer we should see a oh we need to import this if you have an import that you need to do you can click on the word and hit control period or command period and say import from word Mark so at components just like that and that should fix and now we have ai ai and hello world so that's exactly what we want right now let's quickly fix that uh light background issue our whole site's going to have a dark background so go ahead and a body type class name and we're going to say BG hyphen and then in square brackets this allows us in Tailwind to use any value that we want so we don't need to use the built-in values that Tailwind has we get to put our own color in here and this is one of the few times we're going to be doing this so you're going to uh do a hash and then 07815 this is just a custom color that we have for the background we won't be doing a lot of that once again that's 07 0815 and then we want text hyphen white and this will just set all the text on our site to White so if we go check that out boom those logos are looking a lot better and we have our hello world on the black background awesome so now we need to get our settings data into our footer and the cool thing is that with nextjs app router you can make calls from pretty much any component and it's not going to hurt the performance of your app where before it was best practice to do fetching at the page level and then pass that down to components now you want to do fetching as close to where you're going to use it as possible and for us here that's going to be in our footer we'll be fetching the settings data from both our header and our footer but next is smart enough to realize oh they've already requested this we're going to cach it and just give it to both components so to fetch data from prismic we're going to need to create a client within this component so we need to instantiate that we're going to say const client is equal to create client and we want that from not at prismic iio client but at prismic IO just like that so that's going to automatically import this which is a local file that we can check out make sure you close this CU this is a function and let's hit save there and actually check out where we're pulling this from this is this prismic .ts file and this is one of the files that gets set up for us automatically that handles things like our routing as well as fetching our data and previews and other things like that really handy file that does do a lot for just a few lines of code so this is the create client that we are importing it knows our repository so it knows where to fetch from and it handles things like caching for us with nextjs as well as dumping that cash when when we need to when we change the routing setup we will come back here to this config and change that but right now this works just fine so back in our footer with that client instantiated we can now fetch our data so we're going to create a new line and say const setting equal to await client get single settings just like that and it says oh you can't say await because we're not inside an async function and that is true but luckily it's really easy to make this an async function just in between export default and function footer you're going to say export default async function footer and then we are all set there now settings is coming back and it's just complaining that hey you're not actually using this so let's use it first we're going to change this div to a footer so it's nice and semantic underneath the word Mark we will come back to that for sure but we're going to create a nav if you just type nav and then tab that creates that new element for you and we are going to make an unordered list UL just like that and inside we're going to map over the data that we get back from our settings request so we're going to say settings. dat and you see that as as we type it knows what we have here because this settings object is actually typed for us automatically by slice machine as well as by the prismic client so this is all handled for us so you can type and you know that there is going to be something there so navigation we see it right there these are the uh different things that we created that site title navigation meta description fallback OG image we want the navigation and then that is going to be an array and it should tell us that oh it's it's yelling at us because yeah we're we're not um doing anything with it yet but if we go map we're able to actually then iterate over it so we're going to create an arrow function inside here I'm going to say item and then create that arrow and oh I want an implicit return so use parenthesis there all right and inside we're going to create a list item just like that and we need a key here so we're going to say key is equal to item. Lael if you're familiar with react you know that any time you iterate over something like this you need a unique key so that's what we're going to be using and then inside here because we have a link and a label that we're using we want to Loop over uh and and create a prismic next link because this component will help us read the uh specific format that comes back from prismic when you're using a link so if you start typing prismic next link there you go it's from at prism nextt go ahead hit enter we're going to be using a lot of the Auto Import feature so that we don't have to like do it at the top I really prefer that so get used to that uh and then we're going to say field is equal to item. link just like that and we can be sure that we're passing the right thing because it's right there we can close that and then inside here we want to use item. label and that is what's going to be passed inside the prismic link and yeah that should be it for now let's go check our result features and get started awesome that's exactly what we expect because we have those as our items and just like that if you look at the actual uh markup that we have I'm going to make this nice and big for you we have our links here yep Li and anchor tag linking to Features get started is the text that we passed in excellent we're not doing anything with the button CTA just yet um in in the footer I'm not actually triggering that we're only going to do that in the heading so or sorry in the in the header so it it it makes sense that it's not doing anything just yet now it's pretty typical to also have this word Mark the uh the actual site logo to link back to the homepage that's that's a pretty typical uh pattern so let's go ahead and do that now we are not going to use prismic next link this is specifically for if you are using links that are coming from prismic for this this is just going to be a link to home and I'm I'm doing this kind of like hardcoded I'm doing this manually so go ahead and type link and you'll see we're importing this one from next link and we're going to say href is equal to forward slash close that and then wrap word Mark with that link now here's the thing we're going to get accessibility issues if we leave it just like it is because this is essentially just a picture there's no like actual uh text in here and so if anyone's using a screen reader they won't be able to know what this is and so inside here we're going to type a span and I'm going to say glen. homepage and we could make this um more uh tied to the CMS but right now we're just going to hardcode that you can definitely pull in the title from settings and everything but uh for for us this is okay all right now we don't want this to actually show up though all right this needs to be just for screen readers and luckily Tailwind has a great class that helps with that class name is equal to Sr only and you see the our Tailwind intellisense is kicking in Sr only is position absolute and does all these fancy things to just make it so that this is only seen by screen readers you will not be able to see it when we toggle back uh but now we see that this is a link that would take us home and it is also accessible great all right while we're here let's go ahead and style this out so in your footer go ahead and say class name and we're going to say Flex Flex hyphen call just like that items Center justify between we going to say Gap with six so that's going to give us uh 24 pixels or 1.5 Rems between each of these items border t for top so it's going to give 1 pixel border at the top border slate 600 so I was going to color that uh line for us we also are going to say PX 8 py 7 and on medium it's going or or on on medium screens and above we're going to do a flex row just like that so go ahead and save that we should see a nice little difference there we go so I'm going to make this the normal size you can see we have our justify between is kicking in so it's spacing out these items that they're on opposite sides uh on smaller screens we're going to get a flex column but right now on this large screen we have Flex row we can check that out to make sure that that's working we're not going to do this a ton but just for the beginning uh if you open up your Dev tools and click the little responsive icon there you'll see that it indeed Stacks to be a row so we still have a little bit of styling to do like within this list but overall that's what we're looking for now for accessibility we want to make sure that our navs cuz we're going to have a couple of them our navs have an ARA label so type ARA label and this one's just going to say footer for our unordered list we're going to say class name and we're going to say flex and GAP six so it's going to put them in a row and give it a little bit of space in between each item then in prismic next link go ahead and put a class name in there as well and we're going to say inline Flex Min height 11 and I'll explain that in a sec items Center so for minheight 11 that's just my way of making sure that on mobile devices these are going to have a an appropriate height that fingers can actually tap them I believe the the size is 42 or maybe it's 44 that you you want to have as a minimum height so that you see like as my finger gets close it is tappable um if something's too narrow on screens people can really struggle to click that if you could put a quick board on it you'll see that yeah it's it's a bit bigger than it would be if it wasn't for this Min height so that's why that is there and it's just a good accessibility tip to make sure that you're anything that someone needs to click on is big enough that they can't miss it so just like that we have styled our first component give yourself a nice little round of applause I mean not only did we style it but also we're pulling in this data from prismic so that this can be changed by anyone using your CMS now the reason we started with the footer first is because the header is actually going to be a little bit more complex and that's because of the fact that the navigation let's go to the live site the live site has this bit of JavaScript that it uses so without JavaScript we we can make a version of that that that that actually does work and we probably should uh but this menu uses JavaScript in order to open and and toggle so we need to use a client component now inside of the header we want to fetch data here and then pass that through to a client component we would like for this to be rendered as a react server component but parts of it need to be interactive so we're going to break this into actually two components uh in in a sense so go ahead and create a new component here we're going to call this nav bar. TSX and RFC Tab and there we go we have a new navbar we're going to go ahead and uh save that and then import that into our header you can uh remove the word Mark part that's that that can go into the nav bar let's go ahead and pop that in there and I'm going to control period to import it at SL components just like that cool so that's inside our Navar now and then header can just import Navar just like that cool and I'll steal this part to replace the period you can keep the period it's just I I prefer the at components part like I said in case we move things around it's just not going to break the import also a very quick fix if if you do break the import so first thing we want to do is actually copy what we have over here in the footer we have this uh client and settings line go ahead and copy those and drop those right in the header not in the navbar um because the Navar is going to be a client component and it's saying wh I don't know what this is go ahead and hit control uh yeah command period and import from at prismic IO remember we we we want to import it from that one and then await same problem async just like that so that's fixed now we are going to actually pass these settings down to our navb bar so settings settings now this might seem a little bit silly why are we doing all this because the Navar is going to render on the client side and so we're at the very very top first line you want to say use client like that in quotes and go ahead and save that so this will render client side but luckily this fetch will happen server side that's the benefit right now it's saying hey uh you didn't tell me about settings so please don't pass that so let's go to our nav bar and tell it all about that uh underneath our import we're going to say type and then nav nav bar props just just like this equals curly brackets and then settings I'm going to say content with capital c just like that and it's going to suggest this import of at prismic iclient go ahead and hit that and we're going to say content. settings and you see it starts to autocomplete settings document just like that and once again the beauty of this is that this is all coming automatically for us from slice machine prismic takes care of this for you you don't have to create these complex types it knows exactly what it created for you and what it's giving you back so down here we're going to uh open up our props and say settings and you're going to say colon and we are typing this now actually we no we we we we don't want to open the second curly brackets we're taking just nav bar props just like that cuz the the entirety of this is the Navar props and what we're pulling off of that what we're destructuring is just the settings so it should be curly brackets settings colon and then Navar props just like that because we we typed it so that settings us inside now we can go to our footer and actually grab uh some of this code here so first we we do want to make sure that our our our header I just realized as as I saw footer here I'm like all right semantic HTML so return to your header and just make this div a header just like that easy enough hit save and then in our footer we can go ahead and copy let's say the link to the nav copy all of that out then back in our nav bar we can paste that in just like that it's it's going to have a couple of imports that it needs so go ahead and hit control period import from next link and then prismic next link import that from at prismic next and then we should be set there now remember we're getting the same settings bit so so that like all of those should work just the same way let's go look at our page and we see that yep it is working the same way we just don't have the footer styling like like we had before so it's a little bit funny uh we don't have the flex between and all that stuff so I want to do a couple of things here we want to actually move our nav up uh so that it is the parent element so I'm want to remove this div and that div at the bottom and we're going to change the AIO label to main we don't need to see say header or anything it's just going to be our our main navigation there and we want to give this parent nav some style so say class name is equal to PX4 py4 uh on medium and above PX hyphen 6 MD py6 so little bit of responsivity there for just our padding on this nav then inside that we want to put a div and this will wrap around everything so div and we're going to move this all the way down so it's just inside the nav so we're going to style this by saying class name just like that MX Auto Flex Max with 6xl flex call justify between py2 font medium text white like that MD Flex row and MD items Center hit save and let's take a look there we go so we have it side by side or not side by side but spread across kind of like we are seeing here on the finished site now we installed that Tailwind prettier plugin earlier and I want to show you exactly what that does so if I get rid of flex here uh and I put it here Flex just like that and hit save nothing happens wait did we not set up prettier oh wait hold on my server's not running that's why all right after some hunting around I figured out why the prettier plug-in was not working for us and I think it's something about the setup that they recommended so instead of prettier config JS rename this to uh prettier RC so p r TTI i e r RC and yours is going to be different from this uh but you're going to have just open object plugins and quotes colon and then prettier plugin Tailwind CSS inside of square brackets and quotations there so go ahead and save that and then my experiment of showing you how if I move Flex to the end uh and you hit save see how Flex pops back into order so whatever order you put things in um it's going to upon save run prettier and will automat atically shift things around for you so now that that's working uh and it hopefully yours is is working uh funny that the directions were a little different but that is a very very handy plugin to have for an additional reason watch this if I uh mess up spelling justify between and hit save it moves it to the front and so I can quickly go oh okay there's something wrong there because I know that that shouldn't be there and also if if if we put our own custom class on that that that'll get shifted to the front so we can kind of see that okay anything that it doesn't recognize gets moved to the front so it helps you spot typos and not sit here going why isn't this working right anything that it recognizes will get put in a certain order anything it doesn't gets moved to the front all right now let's do something if we have a button if if uh in prismic we decide to toggle CTA button true we want this get started to look kind of cool so first let's work out the logic of it uh I'm going to come in here to the uh Arrow function and I'm going to change this to not being an uh implicit return and I'm going say return just like that and up here I'm going to say if item. CA button so if that is true then we're going to return uh we can say uh let's call this button link and you can just put that there for now let's create that component right over here so new component button link. TSX RFC inside this and just like that we have a button link up and running uh before we do anything here I'm going to go ahead and create children because we know that we're going to be passing children through so that you can uh put something in the middle of this and that will render out we will type that in just a minute and now we want to go ahead and import button link I can go ahead and change that from at components that we can sort this so that I I I like having components on the bottom anything from like the framework on the top and everything else kind of in the middle so button link uh is now complaining because it's saying hey I'm expecting children congratulations and here we can just pass through the item. label like that that and we're also going to pass on this the key because we need to give it a key so say item. label like I said anything uh anytime you're itating in react we need to do that and field is going to be an item. link and this is going to be very similar in how it works to the prismic next link and it's actually going to utilize the prismic next link uh so let's go ahead over here and oh you know what actually we are not going to use children for this I have a better idea so prismic next link just like that go ahead hit enter and we can import that and this will instead let's go ahead and take class name like that and then we're going to spread everything else and we're going to say dot dot dot rest props and luckily we can type this as a prismic next link props and we can import that from the prismic next package right alongside there so in our return we have a prismic next link we're going to remove the children and that whole part we can have this as a self-closing component and right here we can say dot dot dot rest props and spread that there and what we can do is have class name is equal to and let's just for now uh just make it text red 500 and we will soon style this much much better but let's go ahead and just see if this is working so our button link is getting past the field as well as the label uh and if this doesn't return then this should return let's actually wrap this in the same Li so we can move oops didn't mean to paste that in between we can move that uh label off of the button link let's go Ahad and do that so that we are doing an Li in both instances and let's say did that that did not work oh no it did there we go cool so we have our get started just like that and that is when there is a button selected now this one's actually pretty complicated in terms of its styling uh we've got a lot going on this is like one of our biggest uh Tailwind classes in the whole entire course so I put this in our notion stock go ahead and grab this and we can talk about it and as we can see we have a library that we have not installed yet so go to your terminal close that down and we're going to run npm I CSX just like that so what this is going to do is this little package allows us to quickly uh concatenate or combine classes so you can see that we have all these built-in Styles and then at the end see CSX also combines it with whatever we get passed in so we're going to be using this a bunch just uh it's a nice way to functionally combine strings without kind of worrying about spaces in between and all that kind of stuff it's just a healthy helper function so if we save this uh we should see it over on our homepage let's go ahead and refresh that and there we go we get this nice little pulse animation yours should be pulsing with a nice little like glow and nice little f F in Fade Out so let's talk briefly about uh some of these Styles there's a lot here uh the ones I really want to focus on are the after ones that might be something that you're not too familiar with basically what we're doing is we are using a pseudo element uh we're using specifically the after you have a before and after as two of your pseudo elements and as soon as you hover over the the element itself it sets the background capacity of the pseudo element 215 and so then the pulsing that it's doing which is a built-in um animation in Tailwind that we are using the the pulsing then is visible and you can see that has some transition and it's a bit blurry you can remove any of these and kind of play around with it and see like what exactly is going on if if you remove the blur you see it's just kind of like a solid rounded div uh yeah so this is is just kind of a a bunch of button styles that you can tweak and play around with this transition is what gives us that nice smooth um fade in the gold so yeah got a got a few things going on and we brought our blur back so there we go so that is our button um any other things we might touch on here I don't think so um you can hover over any of these to see what it is that's giving oh Focus ring Offset you see this doesn't seem to do anything so we can get rid of that I believe so yeah and it also has a focus style uh so that when people uh tab over it it is clear what this thing does so with our button link set up we are going to kind of call the header and footer not done but we're going to put it on pause for now I don't want to get too deep into navs and mobile navs and all that kind of stuff just yet we can save that for a little bit I want to uh get rid of this hello world so we've got a header and footer up and running we are fetching data from prismic let's get some slices going hey before we get into the next part I know it sounds silly but hitting that like button actually helps us build more Great Courses like this one we'll be making more courses on portfolios and e-commerce stuff so definitely subscribe if you don't want to miss out on those and if you finish this course and deploy your site I would love to see it so please post it in the prismic community forums and if you post it anywhere on social media tag me I want to check it out all right it is the moment you've all been waiting for we are going to build out our first Proper Slice we are starting off with this beautiful big hero section so we're going to go into our slice machine UI go ahead into e slices and we are going to create our new slice go ahead and call this hero hit enter and it should build that slice for us great it says save successfully and we can check out our project to see exactly what that did we now have a hero slice it generated some template boilerplate uh component code for us as well as uh pretty much empty mock file because we don't have any Fields yet and the model which is also pretty empty because we don't have any Fields just yet but as we continue to build this out and add some fields that will update for us so we're going to start off in the nonre able Zone all of these fields that we are creating here we only want them to appear once on our slice so in the nonre repeatable zone go ahead and add a new field and we're going to add a rich text field we're going to call this heading just like that and click add and then click the little edit button and we're going to say unselect all and we're only going to want this to be in H1 we can un uncheck allow multiple paragraphs and we are done there then we want to create the little body paragraph right here so we're going to go another Rich Text field this one's called body and we're going to go ahead and edit and unselect all we want this just to be paragraph you can also allow for italic bold for us we're just going to say uh we want it to be normal text and we're going to click done for add a new field we're going to then create a button link and a label for our button so go ahead and choose a link let's call this button link hit enter and then add a new field we'll call this what so sorry we're going to go for a key text this is our button label button label and the key difference between a key text and a rich text is going to be um what both in what you can enter and what you can get back a button label you can only ever enter just regular characters and it just returns you a string where rich text you have a lot more options so for something like a button label where I only ever want a string I go for a key text something like a heading it's going to look a lot better in the prismic UI if we use this and I'll show you that in just a moment and last but not least we have the button link button label and we need our image so go ahead and add a new image field call this image and we are good to go we can review our changes uh we don't have a screenshot but actually we do so if you go ahead and open up this folder from the assets that you have so under assets go ahead and download this ZIP file and once you open up that folder you'll see all these different assets uh these two images are from unsplash but the slice thumbnails here I've gone ahead and taken pictures of each of these slices on the uh final page you could also take them from figma up to you but we're going to grab this hero and drag it in so under changes we can say update screenshot and I'm just going to drop that right in there and there we go so that's helpful for selecting your um the the The Proper Slice when you're both here but also within the prismic page builder so I can go ahead and say push changes and that will then push both the screenshot and the model up to prismic now we might expect that we could go back to the homepage and add that slice but we are not going to be able to and I'm going to tell you why see how it only has just this uh Rich Text slice that we launched with that's because we we get to specifically say uh whether or not a slice can be used on a certain page type so you can have several page types and we're we're we're going to have an another page type for our um case studies but we won't have all of our slices available on that case study page type so we we get to add slice we're going to select existing and we want to activate that hero for our page type so say add and then we're going to review our changes and just push those changes now without even refreshing we should yep there it is we should see that we have access to this hero uh I recommend you going to the final site and copying and pasting in that text it's going to be the easiest way for you to get it I could put it in a doc or something but this way it's all in context uh the button link will be download now um we're going to just keep linking to that same feature page for the rest of this course and I'm going say download now and the image upload media all right we're going to select all of these images just like that and click open and there we go we've we are now uploading all of the images we have our OG image we have some things for our case studies and I going to select the hero image just like that you got a whole bunch of stuff in here now that we can just work off of for the rest of the course and that should work well hero image go ahead and we can add some alternative text here so this uh we can say the dashboard of [Music] glen. and now this will get added to any place that we use this uh image uh as the alt text we're only going to use it her on the hero but it's nice that we can kind of centralize that and and we can go ahead and hit save and we can publish now we're not seeing it over here in the hero section because the component right now still looks the way that you kind of expect it to look in the sense that it only has let's find it it only has this place folder component for hero variation slice variation so in slice machine we have a great feature where when we build this slice out as we're building this Hero app out we actually can simulate it locally so if we didn't put in that data that we just did we can actually build it before any of that text gets put in because uh slice machine creates this dummy content for you the the this mock content and it's really really handy now we can see that there's just this text here and it's uh coming out white because that's what our Styles say to come out but it's not picking up the dark background so we need to make that happen so in our slice simulator folder right here so app slice simulator go to the page and this is where slice simulator uh lives this is where we're we're able to edit this um simulation of our slices this is also what gets used in the CMS so we really want to change the background color so if we type background and we just say 00 0 like that that should I think yeah yeah change it to Black so that's looking good but we we we we're not actually using black so go ahead and grab this I just wanted to make sure that that was working and go ahead and we we just need the color so I'm actually going to edit out the rest so just type background and then hash 07815 and that's the proper background color and that's looking a lot better and it'll also update over here so looks good so now we want render this content onto our slice and the quickest way to do that is by grabbing the code Snippets that slice machine gives us so go ahead and hit this little toggle here in the hero slice and we see that we get prismic rich text prismic Rich Text next link and it shows us exactly the location of all of this data so I'm going to copy the heading to start with go ahead into the hero back back to the hero and we're going to get rid of this place holder content we can keep the section part for now and go ahead and paste that as you know control or command period update that import from prismic react just like that and if we hit save we should see a not not a lot going on there but at least we we see that our data is getting piped through uh go ahead and do it for the rest so grab that body paste that in we're going to grab the button link and we're going to paste that in just like that it's another one we need to import period and enter and then here in the middle we see link we're actually going to place what this one gives us I want to copy this out so that we don't get the the react fragment in there and I'm going to paste slice primary button label right in between so that is our prismic next link and we can actually convert this real quick uh we're actually not going to use next Link in this we're going to use our button link just like that and then that's going to swap out nicely we can actually remove this I kind of forgot uh and then last but not least we have this image and so copy that and we're going to need to import that as well all right save that and let's take a look at our simulator see how that's looking and there we go so we see a lot of uh mock content because this is all coming from right here this isn't what we entered into the CMS I'm just showing you how slice simulator allows us to kind of build out quickly and it gives us an image we we don't have to worry about all that stuff but uh and we have our our little button there that's working just great but we can hop over to our homepage and we see woof it is kind of messy because we don't have any styles on this we don't have any like containers or anything like that we can slap a quick container on the section so you go class name just container that'll at least give us some kind of bounding box but we see that we have our let's inspect we have our H1 coming through for hello world uh we should have more in that section oh uh oh sorry that's our Rich Text slice that we can get rid of now uh let's go ahead and get rid of this Rich Text default go ahead right here and click delete and there we go there's our hero showing up hit save and published to remove that R teex slice we we we're going to reuse that rch slice in a different way later on um if you refresh your homepage there we go so if you inspect we have H1 designs that shine with d d IC intelligence we have our paragraph we have our link and we have our image with the alt text coming in automatically along with lazy loading and all of the other things handled for us thanks to uh prismic next image all right so now that we're passing all of our data in here the next thing to do is to style this component it is not looking so great right now what we want to First do is grab a couple of the components from our notion doc first let's grab star grid this is the fancy little Grid in the background here that uh eventually will have that little wave pattern but right now it's just going to be what it sounds like a grid of star so go ahead and copy that we are going to put that right in our components folder so create a new file called star grid. TSX and paste that in there if you ever wonder where it should go I've put that at the top for most of these components and go ahead and save that like before this is uh SVG the only difference here is that we're using actually a little bit of JavaScript to create the grid uh you can see that it's only about 44 lines of code that's because it is using the same icon over and over and over again and just uh we're just using that use feature of SVG it also has a little bit of Tailwind in there just to make it absolute uh to to move it up and to put it in the background behind anything else we're also going to grab this bounded component and I will talk about it it's not too interesting and it just takes a little bit of time to type out so go ahead and create a new component called bounded TSX just like that and we are pasting in this one right here so uh we can talk about this briefly we have a couple of props that this component bounded uh receives and we're going to be using this component in place of the section to wrap around each of our slices so if we put bounded here and import it from at components bounded uh we can see what it does and then we can talk about what it's actually uh like what each of the oh it doesn't like that let's see ah I kept that container class on make sure you get rid of the container class and then you should be set now it should be centered perfect there we go glad we figure that out because that is not what we wanted I'm was going to turn off there we go had a little Flex thing there so now it is centering our content and that's a exactly what we want and as it scales down it'll give us a little bit of padding it's a nice component that we're going to wrap every single one of our slices in to get a nice centered layout all right so now we want to add that star grid inside here so we're going to actually create a new div I'm just going to put period relative and then hit Tab and it'll create a div with class name relative wrap everything inside that relative div and we're creating that because the star grid is absolute and we want it to kind of bind to that or or or be contained by this div so star grid just like that and if we save we should see Tada we have our star Grid in the background there so that works great next we want to actually check before we go ahead and start to render out things around our heading our body our button all all those things we we have a great way of checking with prismic to see hey did anyone even fill this field out because every field and prismic is optional giving content teams full flexibility there so on our end it's our responsibility as the developers to check is this even filled in so we're going to use curly braces and start typing is filled and we'll see ah it's saying do you want to import this from prismic client and I say yes I do and I say isil. Rich text and we're going to pass this it's a function we're going to pass this the slice primary heading like that and and we're going to say if that's true because this is going to return a Boolean it's just is is filled right and so if if that's filled in with anything then we are going to parentheses return this uh prismic Rich Text so that's how we check to make sure that um something's actually there and and especially the the reason we are checking for that is we want to make sure that what we're about to render doesn't render as just an in the H1 because we want to style the H1 and I don't want to send this if there's nothing here now right now prismic Rich Text is going to render out its own H1 so if I were to save this it would be o it would be H1 and then H1 inside so to just get back a string I'm going to say prismic text and it's a different component we we we take the rich part out of it and suddenly we are just going to get some Tex so if I save that and go inspect we should see that it's an H1 with just a string inside and that's exactly what we want because I want to toss some Tailwind classes on this H1 so go ahead and say class name and we're going to uh say text balance it's a great little um CSS trick that I can show you in in a sec it only works in Chrome but it really makes a difference uh text Center ENT text 5 XL it's going to be on mobile devices font medium uh opacity oh no we we don't need apacity yet we'll get into that for animations later uh MD text 7 XL so just like that and we should see nice it's looking great and then if we shrink our screen to be smaller it's going to shrink down a little bit so that's what we are looking for now if I remove me remove this text balance I just want you to kind of see the difference without it um as I go and actually it it it might not be too bad on this one heading but I I recommend it for all of your headings because um what it does is it actually checks and makes sure that uh it is as balanced as possible so you're not going to get like one word at the end that's that's just small and it just looks bad so for most of our headings we're going to be put putting that text balance on there because it's just uh it's really nice it it it's a bit of typography flourish that you're going to appreciate so we're going to do kind of the same thing we are going to first make sure that we have uh something filled in here for slice primary body so I'm going to say is filled. Rich Text slice primary body just like that and if that's true we can go ahead oh I need to use parenthesis and return that oh I'm getting a little bit funky hold on one sec I acally use curly brackets uh for that return there we go let's hope the formatting saves me there it does sorry about that and we are going to wrap this in a div to style the content inside this body so I'm going to go ahead and say MX Auto this is a nice little hack to get your uh div and classes started all at once so got mx Auto I'm going to put some more classes in there uh Mt is six Max withth uh let's go MD text balance text slate 300 and that is it for that component let's see that's looking pretty good but we want actually our text to be centered and we can toss that centering on on all of our components for this uh slice so let's actually style it up here we can toss on the bounded go class name and say text center right there and that should impact everything in this slice all of our text in the hero slice needs to be centered so it's not that big a deal cool so let's get into our button link we're not going to do too much here we just want to make sure that it is actually filled in before we start to render anything so is filled. link SLI primary. button uh link we're going to check for and if that's true return this button link and then on button link we can give it a class name and we're going to say hero no no uh mt8 soor I'm getting ahead of myself there's some animation stuff that we'll get into later uh so right now just mt8 and that'll just give us a margin at the top and you can see it gives a little bit of space between itself and the body text great last but not least let's get to this image so first we're going to do is fill and we're going to check for image and we're going to pass it the slice. primary. image if you're using something like co-pilot it'll probably already pick up on the pattern and it should be filling these in for you when when I use copilot it it runs really fast and uh yeah this is a whole lot easier uh on the actual image I'm going to say class name and we're going to say rounded LG and that's going to round the corners pretty substantially let's check that out real quick before we get into it and you can see it h i mean you might be able to see it has some rounded corners but we're going to add something right now to make that even more dramatic so go to your notion doc we had that bounded TX right underneath it should be global. CSS so right now this is what our CSS looks like we're going to add a few few things and I'll talk about them as we get into it let's head to our global. CSS and paste that in and yours should look like this so we're we're using a glass container class that I made and I'm going to explain to you what this does uh basically on the glass container element itself it's just going to set possession relative because we're going to come in with a pseudo element we're going to say before and then this at apply actually applies Tailwind classes and we're using that because we're using some of the Tailwind color so I figured why not go for it and uh you really can in a CSS file use either but uh I figured if if we're using some of these colors just go for the whole thing and what this is going to do is going to position this pseudo element absolutely inset is uh the same as having top left bottom and right all set to 10 or sorry to 10 pixels apologize oh wa no no I was correct because the dash at the beginning so 10 pixels uh the Z index is -10 we're going to round it um it's going to have a light little border and this intellisense thing is really handy because it shows you exactly what value you're getting back so it's it's making a a light color 20% opacity and then a background with 10% opacity and we're going to blur anything behind it uh with with a blur of 12 pixels we're not going to get much behind it for this one but we're going to use this glass container over and over again throughout the course so back here in our hero we're going to go ahead and wrap this prismic next image in a div that we're going to start with glass container and just like that we can wrap that around it and let's see how that looks to begin with nice so you see with just a few Styles and that one class we have our little glass container effect there we still need to add a couple classes so next to glass container say mt16 and W fit for with fit and there we go we have a little bit of space and only thing we're missing now is this light little blur effect so how do we get that well we're just going to use a div inside the div so next to prismic next image be before it we're going to say absolute hit Tab and you can just self close this div because it's not going to have anything actually inside it it's just for its styling purposes going to say inset zero and that's like having top left let me see yeah so inset is is not a Tailwind thing uh it's it's just a short Shand for doing top left bottom right as I said uh negative z-10 so that's going to put it behind this prismic next image BG blue 500 Dash or sorry sl30 forward sl30 and that drops the opacity to 30% blur to XL and we're going to say filter although I don't know if filter yeah yeah filter is necessary because of of the blur so go ahead and do that and there you go you should have the same kind of a blur that we have on the main page um if you want to customize this site to your own liking go ahead and you know you can say green or any of the Tailwind colors that they have and you can make this site completely your own but for our purposes we're going to be following and building out the glisten AI site just as you see it but please I I encourage you to change fonts change anything that you want make this site yours so this is all suggestions from me but look at this we have our slice all set up and and it even looks good on mobile at least it better it should there we go nice so that's looking real slick well done and yeah just like that you have a hero slice built out and ready to go now for animations we're going to come back at the end of the course after we've built everything out and uh add those animations we're we're going to build all the slices we're going to deploy the site uh just in case animations aren't your thing and you don't want to kind of get caught up in that if you just want a a goodlooking static site that's totally great but if you want to add those uh cool little flourishes and the entrance animations and all that stuff we will get to that at the end Gap is coming in a little bit later but I really suggest you stick around cuz that's just really nice the the the the difference between the two right like I'm excited for it all right it is time to build out our next slice we call this one the Bento slice because it has this Bento Box grid that you will see on a whole bunch of sites and we also were going to be doing this cool little gradient effect on just some of the texts and you'll be able to change that within prismic uh so that it's completely customizable we are also using our little glass container class around here so we'll easily get these uh nice little borders to stay on brand with the rest of our site and we will use CSS grid to align these in the way that they are so to create this slice let's go ahead into our slices folder here and hit create I'm going to say to b n t o hit enter and there we go we have our new slice now we have our two options for the non-re repeatable zone and the repeatable Zone in slices we don't have groups we just have the repeatable zone and the non-re repeatable zone so we want to look at this and see okay what parts do we want to just happen once and which are the elements that we want to happen as many times as our editors want so here our heading we just want that to happen once it's going to go in the non-re repeatable zone we have a body that will also go in the non-re repeatable zone and then of course we have these elements we have the heading here we have the body and then we have an image and those three will go in the repeatable zone so let's go ahead and add a new field it's a rich text and we'll say heading and go ahead and click the little pencil unselect everything and say H2 but we also want in italic and that's what's going to be uh how that's going to be how we style that gold text we will have them say italic so let's have a placeholder here that just says italic for gold text just to remind our editors in case they forget and hit done there all right now we need a body so hit Rich text again say body typing fingers there we go and we're going to unselect everything we'll just bring back paragraph you can add Balden and italic if you would like but for me I'm just keeping it as simple as we can so those are the two things that aren't going to be repeated now we need these three so in your repeatable Zone add a new field and we get the same options here say Rich text and we're going to say title I I it's pretty much the same as heading but I just want us to be able to like determine uh the difference the the difference for me is just like this is the title of this box where this is the heading of the slice I don't know it's just something to make a little bit of difference and this is going to be in H3 because it's going to come after the H2 deselect multiple paragraphs and hit done now we're going to add that body uh I know I'm re reusing the name body but oh well uh you can use whatever naming conventions you like but I I would suggest to stick with mine just in case you need you need to compare your code to mine later uh it's a lot easier that you're not having to switch a whole bunch of stuff and then last but not least we want that image so add a field click image and Type image and while we're here you can go ahead and add the screenshot so say update screenshot and I'm going to drag in from our slice thumbnails I have the Bento here I'm just going to drag that in there doesn't look like this yet but it is wishful thinking and it will soon so for this one we can see how far we can take it with the slice simulator go ahead and click simulate at the top right here and this should open up the simulator for our Bento and says placeholder component and that's what shows up every time we create a new component if we head over to vs code we see we have a new Bento folder and we have our index our Mock and our model uh basically what slice machine is creating is just a simple Json file here but it's just nice that you don't have to type any of this you don't have to remember how this whole thing works it's just all done for you and quickly I I just want to touch on a bit in this index file in the actual slice component um I kind of skipped over the type here so this is just pulling in automatic types for you that are created by slice machine so you don't have to do that and it's already added here in typescript so I if if you're not familiar with typescript this might seem like a lot of weird stuff going on but it's basically pulling in the the type from the automatically generated types saying that this is typ ento props and then we say that what this is going to get as its props is going to match this type and it's true because slice machine or sorry uh prismic is going to be passing in this prop so we know exactly what this is getting so we can make it really easy to set up so all this stuff is just typescript stuff if it's if it looks a little weird to you don't worry about it too much you don't have to do much there so if we head back to slice machine we can grab our code snippet so go ahead and start copying these in we we might might change some of these to be a prismic text or a prismic rich text um in well a prismic text instead of the rich but uh it's good to start from this at at least it takes care of the field and everything for us so go ahead and grab the heading and you can start to paste that in I'm going to import everything at the end so I'm going to copy the body and going to go down to the repeatable zone now definitely pay attention here because the snippet aren't going to be what you might expect so if you copy this and paste this in I'm I'm going to give it some space if you paste that in it's going to complain not just about it it not being imported but it's going to say hey I don't know what this item is can you tell me what this is and we will address that in just a second I'm going to finish copying so that I'm not jumping all over the place like I am known to do copy and paste so you should have five different uh code Snippets here so first let's go ahead and import everything let's take care of that update import there we go and one more great so we have everything imported now we need to deal with this item. tile issue and if you look here it actually says slice. items I for the index uh. tile so items is what we are looking at here in terms of um the array that we're getting back from prismic that has these actual items on it so we need to go ahead and say SCE do items. map just like that and now off of that we can do an arrow function and with an implicit return so use parenthesis like that and we can put everything inside there and here we just need to say that we are getting item off of that items array and I'm going to go ahead and wrap everything in a div I'm going to actually do period glass container just like that and wrap everything there and of course because it is re react and we are iterating over something uh we need a key and that's going to be item. tile that should be unique for everything ah but we see a problem here because item. tile is actually a rich text so we need to turn that into a string and this is one of the benefits of typescript it's saying hey this this isn't what you think it is so I want you to go ahead and type as text and we might need to import that yeah we we we definitely do but I I thought it might pick up with the auto Auto Import uh so control period and it's going to be from prismic client so uh your import from prismic client should look like this contact content and as text and this is just going to turn it into a plain text string just one of the many helpers that we have with uh so that you can deal with prismic content and data uh much easier so we don't have have much here but we should be able to go over to our simulator and take a look you might have to refresh but there we go now it's not looking good because uh this image is coming in nice and big you see the image original size uh that they're giving us is 5,600 pixels across and yeah it's just it's just going to be real large and without any classes or styles to constrain it it's just going to go real big we see our glass container though and we see our content coming in here's our head I'm going to go ahead and just uh copy over the new gold standard like that um and I copied it over and it it kept the italic so that's good and right now it's coming out as italic but we will be able to style this in our component in just a second I'm going to copy this over we we could probably do the full um like like we could bring this into prismic now but I want to see how far we can get in the slice simulator because this is a really handy tool so you don't have to push everything to prismic you don't have to go change your document cuz if your team is working on this homepage they might not like you going in and just adding data and and everything and messing around in in what they've got going on so we we can save Mach content there and uh we will take care of the enormous size of this image in just a moment so what what I'm going to do is I'm going to hide the editor and I'm actually going to change this from desktop to maybe mobile and move this off to to the side so that I can have these two kind of side by side so here I'm going to just set it up so we can maybe see as we're styling let's see if this works there we go so we've got that set up now first thing we're going to do is change this section to bounded go ahead and import that from at components bounded just like that and saving that should get there you go you're already looking a lot better all right good good progress just importing that that one component now we are going to be changing the output of this prismic Rich Text for our heading here so go ahead and open this up a little and pass it a components prop and this is going to take an object so do double curly brackets like that and this is how we can customize what is rendered to the Dom whenever prismic gets a certain type of content back so if you hit control space or command space we can see the options that we have so uh an M an embed heading one heading two heading three all of those an image a label so if any of these come back from your Rich Text field in prismic then you can change what output so if you're using something like Shakra UI and it has a special heading component you can make sure that all of your headings uh output as a Shakra UI component and not just a typical H1 by default these will output as what you would expect them to right like a paragraph is going to be a p a heading one is going to be an H1 that sort of thing so we know that this title can give out two things heading one and italic or M in in in this case so go ahead and choose heading two to start with we're going to pass this a an arrow function and this is going to get children CU we're going to pass that in between and has an implicit return it's going to return an H2 not an http2 server request that's my autocomplete not working for me so an H2 and inside is going to be children nothing too wild here this is essentially the default return this is what we're we're getting anyway but we want to style this H2 so go ahead and say class name and we're going to say text balance talked about that before text Center text 5xl font medium and MD on larger screens is going to be text 7 XL cool go ahead and hit save and there we go just like that we have much better text there now the only thing is our gold standard is catching that default em and it is not uh it's it's not the look we're going for so we can go ahead and style that em so uh right after heading to say em and we're going to do the same thing you can actually copy this whole bit over so that we just need to change the critical Parts uh children will stay change your H2 to an E M and we can wipe out this class name part because this em is actually going inside the H2 so we only need to style it for the things that are specific to that gradient so I'm going to say BG gradient to B and what this does is says the the fact that we're making a background gradient and we are uh making it go from top to bottom that's what that means and then uh from yellow Yow 100 to Yellow 500 and then BG clip text and we're going to say not italic that's how we get rid of the italics and text transparent now I'll explain this but first let's make sure it works and nice it does so the trick to doing gradient text is essentially to give your um element a background color and then use BG clip text to um to to to make it so that the the text actually acts as like a mask on that background so if I remove BG clip text or just I mess it up with with like a erroneous letter we see what's actually happening here with without the mask of that text we see that it's just a gold gradient behind but as soon as we bring back that BG clip text it Clips to just the text and we also need to make the text transparent otherwise it will be on top of our gradient and kind of defeat the purpose so that's how we do that we we just worked with gradients real quick and we also did a nice cool little gradient effect and in just that bit of code you can have a nice gradient and you can do this in all different directions like the world's your oyster with this trick all right our heading is looking great now let's go ahead and style our prisin Rich Text here for the body what we're going to do is wrap this in a div so I'm going to uh start by saying period MX Auto just cuz that's our first class that we'll be adding to this and then in there I going to go back in and say mt6 Max with MD text balance text Center text slate 300 all right save that and there we go looking much better um and let's see if text balance makes a difference here I I I I kind of want there we go see the difference that looks terrible compared to that that is so much nicer to look at so that's why we're using text balance it really makes a difference where you uh when when when it comes down to like things that you can't really control uh it's it's tough to manage this any other way and text balance just takes care of it for you not available in every browser yet but uh it will be eventually and it is nice and and on the browsers where it's not supported it just doesn't um like it won't break anything it's a progressive enhancement so we are good there that uh is handled for us now so let's come down to our items and we're going to wrap this entire thing in a div I'm going to say uh period mt16 hit tab I'm going to move that div down and by the way I'm I'm holding alt uh as I move around with my arrow keys to shift that down in case you are wondering uh so on that div that's wrapping around our slice items we're going to say mt16 grid grid Max width 4 XL I'm going to say grid rows now oh let me see grid rows but um we're going to do auto auto auto so say Auto auto auto and you have to have underscores there if you put spaces that becomes a different class so go ahead and type it just like that we're using the square bracket so that we can um say whatever value we want going to say Gap 8 and MD grid calls 3 and MD Gap 10 and that should be it so right now we only have one item we can go ahead into the editor here uh and add another item uh unfortunately when we add an item it it just enters blank so we can just say lower ipsum and we can for the body just uh copy what we have up here and for your image let's go ahead and let's grab a a a horizontal one cuz this element is going to be a horizontally styled one most of these are vertical this Clementine one looks fine though there we go and so now we at least have a couple of items in here so save mock content and I'm going to shift it back over up close the editor so now we've got this uh this second item and I want to talk real quick about what we just put in here uh we are going to be using grid as as I said to handle this Bento Box thing and the first box let me pull this back open the first box is going to take up one of the THD the three grid sections and the second box didn't mean to view Source me to inspect the second box is going to uh take up two so as you see here we have that taking up one and then the second item takes up two the third one takes up two and the fourth takes up one now we are going to change that based on a Boolean that we can add into the actual model here uh but right now let's just go ahead and finish styling up that component so um that's the finished one we want the simulator there we go we are going to style The Heading the body and the image and finish that up so in addition to glass container here we want to add a couple more classes so going say row span three grid grid rows uh grid rows okay now sub grid and I'll talk about this in a second gap for rounded LG BG gradient to B so it's going from top to bottom uh from Gray we're gonna say 900 can click on that right there and two gray 950 so it's just going to be a really subtle like from from dark to just a little bit darker and then we're going to say P or padding of four let's see there we go so we have this like inner div now that gives a little bit of padding and it's looking pretty good let me uh zoom in that doesn't work for this sice simulator so let me try desktop there we go still can't zoom in because this is an eye frame inside so uh we see that that works well but I want to talk about why we are using subgrid and in fact what subgrid even is you might not be familiar with it it is a pretty recent addition to CSS so what subgrid allows us to do is it allows us to determine the position of internal elements based on the parents grid all right so here I have the finished version and let's take a look at what we have so we see that we have uh grid rows Auto auto auto and so that takes care of these actual rows here and those are going to repeat so as as you can see we have 1 2 3 and those are each set to Auto so that they fill however they need to and then the only thing that changes when it comes to responsivity is that on uh large devices it's going to have grid calls 3 when it shrinks down it's going to be grid calls one as a default but here we see that we have 1 two three rows and then as we add more elements that's going to repeat so we have another three rows and then you can see here sub grid that allows each of the elements inside to say hey we want to follow exactly what my parent is doing so if if we turn subgrid on and turn the grid off we see that each of these is getting the same sub grid and this allows us to make horizontal alignments that we couldn't um otherwise make so if I were to go in here let's just quickly go in here I want to inspect this I'm going to reduce this and just say hey uh you see that that doesn't shift around that this image would normally shift up and fill in this space and the alignment would be thrown off but now we don't need to worry about that and if I put in a whole bunch more checks so if if I undo that there we go and I can just double this up or triple it even uh you see that this item moves down to align with that so that's what we want obviously we need to uh be careful about how much text we put into these elements but that's on your content team but for us we can make it so that subgrid aligns these items the way that we want them so that is why why we are using subgrid that is where subgrid is really fantastic otherwise this is a very difficult problem to solve all right so back to our code and back to the simulator we want to take care of this title now so instead of prismic Rich text we're going to say prismic text and we're going to import that now around that we're going to uh because PR text is going to render just a string we're going to use an H3 and we can say period text hyphen 2XL and if you hit tab on that we get an H3 with that as a class name so that is set and we see that that's looking good that's exactly how we want it now around this uh the the body we're going to have another div and we're going to say Max with MD and hit Tab and and we could just chain all of our classes um with em in in that sense like if I were to do period Max with MD actually you know what let's go ahead and do that just real quick so max with MD period text balance period text slate 300 and we hit tab we get all of those added as classes sometimes I just like to do the one and then handle the rest inside totally up to you but just trying to show you some tricks along the way in case you're not familiar so next on the image oh I can go ahead and save that and yeah looks good all right on the image class name we're going to say Max height 36 and and just to clarify this is going directly on the image and width is auto so we're setting the height and we're making sure that it doesn't get too huge as we said this image can get get kind kind of big uh but we want to make sure it has a max height um and then we can handle the rest from there so that's looking pretty pretty good now the only thing is um these aren't taking up different sizes uh these are each taking up one column so we want to go back into our Bento enlarge that and we're going to add one more to the repeatable zone so that each of these items gets one more thing we're going to add a Boolean so it's going to be like a true false and we're going to say wide so w d e just like that and so if that's true then we want to make this wide so in in order to handle that let's go back to our code and we are going to add a turnery right here on our class name so go ahead to class name and wrap that in curly brackets I'll zoom in a little bit in case that's too small uh curly brackets and now we want to call in clsx we haven't used this much yet but right now we're going to see how this becomes really handy so we're going to close the parentheses over there and at the very end I'll close this over here at the very end we want to say comma and we can put anything else in here it as as many arguments as you want to pass it it'll just string them together and output a solid string that then Tailwind will take care of from there so we we want to say item. wide so if that's true we want MD call span 2 so on medium and up it's going to take up two columns otherwise so we do colon so if if it's false we just say MD call span one just like that let's check it out let's see how that came out our simulator here we don't have either of these being wide so we want to set the second one to wide we could set the first but for the style that we're going for uh we are setting the second one now it looks okay it's just that the text and the image um styles or or or rather this text is too long and this image is too uh short or or not wide enough I should say so if I cut a little bit out of this that should already look a little bit better and then if you look at the final site you see that this image is intentionally very wide so that's the the design and uh this just isn't exactly there but we are seeing that it works and if we were to add more items this is looking great so let's go ahead and push this up I don't see any other reason to delay let's push these changes and in our homepage here I'm going to refresh that error might just be because um it's been hanging out on local host for a while and haven't reloaded in a bit we see we have our hero and our Rich text and we don't have it actually added to any page type so that's that's why we're not seeing it here so if you come in here and you go uh where's my slice it's because we need to decide hey this is available on this page type so select from existing choose Bento add that and we need to review that change and push that up to prismic because once again we are on our Local Host here slice machine runs locally and prismic is on is in the cloud as they say so we can go ahead and add a Bento and we see our little hint here italic for gold text I am going to go ahead and copy like we did before the new gold standard copy that over paste that in copy the body going to just do this real quick and you can go ahead with all of these and we can speed this up a little bit so that you're not waiting through this all right so I've added each of those items I have four um and I have added a little bit of alt text so that we make sure that this is accessible and I'm going to go ahead and publish that and back at our homepage that we have over here we can go ahead and hit reload and there we go that is looking fantastic so we've did a couple tricks in this one we have our glass border like from before but we did some really cool uh grid tricks here where we're not only using grid in a smart way but we're using sub grid which is new just last year and we're also doing this cool gradient effect with the tech so well done there is our Bento slice all right it is time for our next slice we're going to build this slice that I call the Showcase it's eventually going to have this cool little animation but for now we're just going to focus on the straightup design of all of this and we're going to have this image hanging over the side icon all this good stuff so let's jump into slice machine go ahead to slices and we can click create or if you want to skip that part at the end where you have to add it to your page type we can go into page types and create the slice from here so add slices create new to start from scratch so we're going to call this showcase hit enter and it will build that slice and if already tied to our page type but we need to click into it so you can see there is Showcase and here we are so let's check out what fields we need to add to our showcase slice we see we have a heading so we're going to add that we also have this icon here and we're going to use a select field to allow our content team to pick from a few different icons that we want to add or or just allow them to have it's you could do an image field for this but I like having it as a select so we don't get like just wacky emojis and stuff like that it stays with your design system that way we also have this little subheading here we have the body text here we have our button text and the button link and of course our image we'll probably put the image second so let's go ahead and start adding those fields none of them need to be repeated so we're just going to go all 100% inside the non-re repeatable zone so let's start with Rich text we're going to call that heading and we will edit that to be an H2 go ahead and click done add add another field this is going to be the image let's call this image add another field we are going to use a select this time so a drop down field of options for Content creators and we're just going to call this icon and we need to go inside this and customize this so that the options aren't one and two uh we're just going to do two here so gear and we're going to do cycle so these are going to be the two icons that we give access to you can add as many as you would like but uh for the sake of this uh course we're just going to do these two it's going to be pretty simple there next we're going to create another Rich Text field we're going to call this subheading and we're going to edit that to be just a heading three it's going to come after the H2 disallow multiple paragraphs and actually go back to heading and take that off as well and for your next one this going be a rich text you can call this body pretty much call any paragraph like thing body uh unselect we go paragraph bold and italic for that one give them some options and then we want our button text so choose a key text we just want that string so button text like that and we also want a link so we say button link like that and of course we want our screenshot so go ahead and say update screenshot and we will drag in the where is it integration showcase there we go showcase default now we're going to make a variation of this soon so that's why you see the Showcase reverse and I'll walk you through that in just a little bit but first we need to build the Showcase default you can go ahead and close the simulator from the Bento and we can open a new slice simulator version for our new showcase slice and it looks exactly how we would expect a brand new slice to look so let's go ahead and open this up in vs code and here's our showcase slice come down here and you know the deal by now go ahead and wipe out the little bit there uh change section to bounded can do a few of the things that we've done a few times now uh sometimes autocomplete doesn't fill out the bottom so make sure you're handling that and yeah it's yelling that we don't have any children yet so let's get at some children go ahead and grab the code Snippets from here copy and paste go through that that's going to be uh what saves you a whole bunch of time every single time we go out and um work with slice machine trust me this kind of thing with other cms's or just other data in general is always like kind of a guessing game of just figuring out like all right does this make sense uh what is the shape of my code and everything so going in body button text sorry about the flashing I know it's very it's stuff going from light to dark so apologies for that um and we are back here with prismic next link so go ahead and update your Imports just like we've done several times now not going to walk you through that but that's command period And I am set here I'm going to save this and we're going to go over to our simulator I'm going to hit refresh real quick cuz sometimes it just doesn't take on that um potatoes the the uh the the mock content that's automatically generated can sometimes be a little bit silly uh I'm going change the icon to gear and we see that the icon changes this will obviously uh feed into an SVG in a little bit but yeah we are seeing that we're getting back um pretty much what we expect we have a link here uh date is the button text so it's looking good well it's it's looking like something right it's at least there uh we can grab your gist in your workflow and oh actually you know what I made a mistake so go back to your heading I I told you to go in and disallow multiple paragraphs we need multiple paragraphs here because we are doing this little style bit where it says your glisten return your workflow so go back there change that and now does this update immediately it does so we we didn't need to reload or anything but yeah have you're GL list in your workflow this image is fine for what we need it for and the rest is fine as well so head to your code we just want to slide this button text I'm actually going to not grab the fragment going to remove that and put that in there instead of link so now our yeah so let's change date to sign up something like that great so now our link says sign up and the rest is good to go we're going to start with some styling we're going to put a quick little class on our bounded component and just say class name relative and that is because we need something to uh contain this glow so that's going to be positioned absolutely we need the entire component the entire slice to be positioned relative so that it doesn't go outside of that so let's go ahead and create that glow right now I'm going to put a little class on they just called glow that doesn't do anything but it is going to just let me know hey this is your glow div that's what's going on here going to make that self closing and let's add some Styles so absolute uh negative Z10 so that's going to bring it behind everything else aspect Square withth full Max width XL rounded full let's go around it full there we go uh BG blue 400 and then slash2 so that's going to be only 20% and then blur 3XL and filter the blur won't work if you don't add filter at the end that just kind of triggers all of the filters that you might add to something so we can barely see it hopefully you can see it back there if you can't um go ahead and remove the opacity just to check and there you go you see it nice and bright uh but we want that to be a more subtle kind of gradient cuz that's what this style of website that we're going for in tails and a nice 20% it it's going to look you know just like that you you can make it as strong as you want but um kind of like the more subtle the better for for this sort of style so we have our little glow back there and really all that is is just a square that's blurred to all heck so if if I remember the if I remove the 20 and the blur we'll see that it's just a sorry I said it's a square but that but the rounded full makes it a circle and then we blur that so it's just a circle back there that's all it is fun tricks like that uh you can go really far so now we want to go ahead and style our heading we have our prismic Rich Text we could um change this back into a prismic text and wrap it in an H2 but here's the reason why we're not doing that um we would lose if if we just turn this into a plain string we would lose that enter that we we we have here so we want to make sure we retain that line break so so we need to keep this as a prismic rich text otherwise we don't get that so go ahead and type components and we do the double curly braces again because we want to uh pass it the object and when we get a heading two back heading two is going to take in Arrow function so let's go ahead and make that this is going to get children so we'll destructure that like that and then in here we go in H2 and we'll put pass our children in and here we want a class name and we're going to add text balance you know how much I love that text Center text 5 XL font medium and MD text 7xl and that let's go check it out over here we go so we and we keep that return that's looking really good all right there's our heading all right now for these elements here we want the image on the left and all of this stuff kind of as as its its own thing on the right and for the reverse we're going to switch them so we want a div that wraps all of this and this image will kind of be on its own so back in our code we want to go ahead and I'm going to slide the image all the way to the bottom just at the bottom uh of the bounded element and I'm going to wrap all of this in a div just just like that and that div is going to get some Styles so actually no I'm sorry the uh the parent div that's going to wrap everything in so we we need to make this div first right this div here actually needs to get created and that contains all of this this is going to push out of it a little bit but we have this parent div we have this child div here and then the image so uh we need two divs so we we have this div that wraps our text and then we need a parent div we're going to say uh grid and I'm going to wrap everything in that grid div there so you should have two sets of divs one that wraps the icon the and all your Rich Text fields and then the image can be inside that parent div along with the rest of it so sorry about the confusion there let's go ahead and add some more classes to what's going to be that uh glossy glassy div all right so we're going to say uh margin top or mt16 and we're going to say items Center rounded XL border border blue it's it's going to seem like it's blue but it's going to be 50 and it's going to have an opacity of 20 so 50 sl20 BG gradient to B and we're going to go from Slate 50-15 to slate 50- 5 we're going to have a px of 8 and a py of 8 and we're going to say backdrop blur and you can see here we have SM LG grid calls 3 and LG py12 so on larger devices we want a bit more padding there so that's the finished version let's check out our simulator and there we go we have something like what we're kind of expecting right it's not perfect it's not not exactly what we're looking for but we see um all of our stuff all all of our text over here including our link and our icon group together we see that this has a border but we need to figure out why it's not showing anything inside and we have this image here all right remember before when I said that the Tailwind prettier config or uh the plugin will help us see how this got moved to the top that shouldn't be there because it should be along with the rest of the gradient stuff uh but it immediately lets me spot it I I always looked to the top here of my class to see all right what's going wrong I had a typo and as soon as I hit save it fixes and there we go that's looking how we expect it to now we're going to come back to the icon itself let's go ahead and style everything else in here we can uh go real quick and just change this this prismic next link to a button link and that should take care of itself and already come out looking nice see how easy that is now that we have that cool next we are going to style the subheading so we're going to say period mt6 going to open that up and move inside and then continue to style text to XL font normal uh we we kind of have a default of most things being font medium so that's why we we want to specify when we go font normal there so that's looking good next we have our body now most of the style is going to come from a Tailwind plugin that we're going to install in just a minute um called typography and it's going to help us with our Styles but we can still add a little bit here that just helps us um space things out so I'm going to say period mt4 and period Max with XL so pop that in there and there we go we get a little bit of space and it's also going to stop it from just like stretching out forever looking good now our button link is already styled but we can add a class name to it so that we can add uh some spacing above it so mt6 and also we can add some default button text just in case uh they don't add any in the um in the CMS in in prismic so learn more we can just put there you can add whatever you want there but that's what we are adding for now now last but not least we want to hit this prismic next image with some Styles it already has the field so let's go ahead and say class name and we instead of quotes here we're going to back up and do curly braces just to prepare for later uh this is the thing that when we change the slice variation in a little bit um this is what's going to kind of have a class change on it and it's going to make the whole component just kind of flip over to the other side so for now just do clsx parenthesis and we will say quotes opacity 90 so just a little bit uh transparent Shadow 2XL LG call span 2 and LG pt0 uh go ahead and import clsx it's going to be yelling at you and right now that's all we really need I know that CSX is a bit Overkill right now but uh it'll come in handy in just a few minutes so if you go ahead and look at your component it looks pretty good but it's not exactly what we're looking for right we want this to hang over the side and we also want it to be on the left side so right now it's kind of failing at those two things we need another couple of classes on here and what we're going to do because once again it's going to uh become a part of our conditional we're going to put it outside of the actual quotes because we will use it in just a little bit so hit comma have a new set of quotes and we're going to say LG minus order one so on large screens this is going to go as negative one in the order of things and LG translate and x and then you need to put brackets negative 15% so it should be LG translate x- brackets -5% inside those brackets so if you go ahead and save that we should see it flip and it hangs over the side on the left now looking pretty good and you can see a little bit of opacity there with this little weird dog thing it's just not going to look as cool but yeah we are seeing the effect that we are indeed looking for um if your image doesn't have rounded built into it like ours does you could also throw a rounded on there to get kind of that effect but we already have that built into the image that we're going to be using so I'm not too worried about it all right so let's install a couple of packages that we're going to be using throughout the rest of the course one is going to be to handle these icons it's going to be react icons and the other one's going to be uh Tailwind typography which handles our typography so we can go ahead into our notion Doc and we can click the tailin typography plugin and the react icons link so we're going to be grabbing both of these might as well install them both in one Fell Swoop we'll go with tailan typography first and this just gives us a nice Pros class and a couple of other helpers on that class that we will be using for our Rich text and other things like that like I said we're getting great typography out of the box thanks to this plugin so go ahead and copy this and we're going to open up our terminal I've already stopped my server going to hit enter and we're going to install that along the rest of the the of our packages great that's all set and now we need to also add the plugin to our Tailwind config JS file just go ahead and copy this line and in your Tailwind config you should have an empty plugins array that you can just go ahead and paste that into and now we are set with that so uh it it gives you some documentation here if you ever need to kind of come back and learn more about it there's a whole bunch here so go ahead and read up but don't worry I will be walking you through it as much as you need so now we're going to grab react icons come down to the installation for a standard modern project that's us we're very modern here so go ahead and npm install react icons just like we did for Tailwind typography and the great thing about this is that it is uh a ton of different icon packages that we have access to but without the bulk of all of these it's going to tree shake and only give you the size of the icons that you're actually using so we have quick access to these but we don't have the downside of being stuck with all of the weight of having like 10,000 svgs in in our project so both of those installed go ahead and run Dev again get your server back up and running and we are going to start out by trying that Pros class out for size right here on our body we're going to pop another class on here we're going to say pros and I'll just hit save so you can see the result of that and we we're we're going to need to come back pretty quickly uh hit refresh if it doesn't update just because we stopped our server but we're going to see kind of a a downside here and yep that's exactly what we're expecting we are seeing that it is dark because this is adding some Styles and some some uh some spacing and lots of different things but it's also adding a color but we can come in here cuz luckily uh they thought about you know dark screens or uh dark backgrounds and we'll say Pros invert just like that and so that is basically for dark mode so that's looking good we have much nicer Styles now if you remove those and save you'll see how it just doesn't look as nice and there's a lot of other things like headings and block content and quotes and everything that Pros just automatically Styles lists for you it's it's a really great class that we're we're going to use in a few spots and it just looks so nice next we're going to need some icons so I am using uh pii which I believe is phosphor yep so I picked a couple of icons from this phosphor package and I'm using uh gear so I'm using pi gear and I'm also using oh I didn't mean to click that I'm also using arrows clockwise where where's that it's up here somewhere so as you can see phosphor icons has thousands to choose from um and I'm using this like arrows clockwise kind of thing so if you click this it will open that up and you can see it has the import it has the component for you has everything you pretty much need we're not using the thin one we're just going to use arrows clockwise uh if you can't find it don't don't worry as as I'm saying they have a bunch of variations but um I'm going to go ahead and copy this line This import Pi Arrow clockwise fill uh you don't need to grab that exactly we can always type it out together so import Pi arrows clockwise going to remove the fill and from react icons P pi and once you get that in in in fact we can wipe that out I can start typing uh Pi arrows clockwise and we get all these results here so autocomplete your friend and we're also going to do uh Pi gear p i g a r just like that not the Bold just the regular um and make sure it's coming from react icon slpi uh if you do anything like bootstrap icons or something that's going to be different icon so make sure it's Pi if you want to import from several different packages you have to have another line so that's what we need there now we're going to make a quick little object here going to say uh const icons right underneath the import and we're going to make an object that says gear is gear just like that because that's actually a oh sorry Pi gear see it's yelling at me going we don't know what that is and then we're also going to do cycle is the other uh icon that we named I'm going to say Pi arrows clockwise like that and there we go so now we can reference this object and uh each of these names down here with this slice primary icon so let's create a div to wrap around this icon I'm going to say div because this needs that blue background that you see with the icon and we are going to add a class name on this div say class name W fit so it's going to fit the size of the the uh contents rounded LG BG blue 500- or sorry sl35 P4 and text 3XL just like that now that's still going to just be text here so we need to actually um reference that object that we have up above but we're going to say slice primary icon so if that exists and icons which is the object above slice. primary. ion and just like that we should see something there we go so cycle is what's chosen here and it's referencing that cycle H there we go and that's how we can give our content team uh a a set of icons that that you know the designer has determined is the right set of icons and uh not let them just go wild with any icon they find on the internet you can pull in as many as you want from any of these packages you could as as you saw there are thousands to choose from you can add them to this object and also add them to uh the select in slice machine here it is as you add those options they will be become available to your content team so now that we have this version let's also make the reverse so come on in here and we're going to click this add a new variation button now variations with slices can do any number of things uh it's it's better to make variations of a slice rather than having a ton of slices cluttering up your uh your slice selector in in here so if you have a hero and the hero can do like a few different things it's nicer to organize it under the hero and have a few variations of that here so if you have like a side by side or something like that better to to make it a A variation than to make an entirely new slice especially because you can reuse the code and we will see that the only real difference we're going to see in this variation is that we get a property that we can then do anything we we we want with so come on over here to Showcase click the add new variation and it's going to give us a couple of fields to fill out so variation name I'm just going to call it reverse hopefully that's clear enough right uh variation IDE is going to be reverse and that's generated automatically and it's going to appear in the API responses and our types will update to show that and we're duplicating the fields from default now in this variation we could change as many fields as we want we could delete all these fields we could add a whole bunch of new fields and that's totally fine and it's not going to affect the the the default Fields so if I go ahead and add a a a field here and uh you know we're going to delete this I just want to kind of prove it to you delete I'm just going to call it that uh that color field has been added to reverse but if I go back to default there's no color field here if I go to reverse there's that delete color field so as I said we're going to delete that um the reverse is going to be the same it's just going to be flipped we could make this a Boolean that that you know it turns that on and off but for the sake of teaching you about a variation I wanted to make this this A variation so go ahead and add a screenshot it's also nicer because your content team gets a different screenshot so they can see exactly what they're doing rather than just flipping a switch they get to see oh right the image is on the right that's what it's going to look like looks pretty good so we have reverse and default now we need need to handle that in our code so if we head to our code as I said it's going to be down here in the image we had this string by itself that might have been curious to you but we did that for reason so go ahead just before it type slice. variation and if you hover that you should see that we have default and reverse now so even if you forget like what are my variations it's going to be in your types thanks to slice machine so if slice variation is equal to reverse and if if if I type this wrong right it's going to say whoa whoa reverse f is not one of your options so just like this is why typescript really does help you out uh so if the sight variation is equal to reverse I'm going to copy this because we're going to pretty much do the same thing uh we're just going to change some of these things so instead of negative order one if it's revers we're going to say it's order one and instead of negative 15% if it's reverse we're going to say it's 15% and then in between these strings we need to have our colon say otherwise do this stuff all right so I'm going to try to make this a little bit bit more clear uh let me put these on different lines there we go so slice variation equals reverse question mark if yes then order one order positive 1 and translate 15 otherwise negative 1-5 so that's how yours should look going to go and hit save and let's take a look in our slice simulator we can toggle between our two variations reverse looks like that and it it's using a different image but uh don't worry about that too much that's just the way that this uh mock data Works we're just looking to see hey is it doing the the thing that that we are expecting and yes it is so go ahead to slice machine review those changes we see that our page type has changed as well as our showcase which has two variations we can say push changes and that should be pushed up to prismic and here in prismic we see that yep just as expected showcase has two VAR viations uh you can I'm not going to tell you which variation to choose you pick your favorite uh but go ahead and bring over the content from that variation and we will have our page looking just like the one that you see live on the site choose this showcase image by the way and add a little alt text I light and said it was a code snipp snippet for glisten AI you can do whatever you'd like choose an icon I choose the gear and then go ahead and add the subheading and all the rest all right I've added all the text and I'm linking to the features page again going to hit save and publish and now we see that yep it's updated right here and we can go ahead uh in in in case you weren't noticing as you were typing uh it's updating right over there but check our homepage out refresh this and you should see a snazzy new showcase slice right underneath and later we will animate that little heading so it Peaks below this little glassy background great job this is looking excellent uh let's continue on all right it is time for our case study slice now this is going to link off to separate pages in prismic we're going to learn not only how to just you know create a new slice but how to pull in data from other page types and custom types across prismic so here is a case study about Nike it's you know obviously fictitious but um this is a separate page type that we are going to build out together and this could be you know if you have a site can be a blog post or something like that but for glisten it's a a nice little case study so to do that we're going to go to slice machine and first we're going to create that new page type go ahead and create and we're going to make this a reusable type because we want this to be uh something that you can make as many case studies as you need we're going to call this case study just like that click create and there we go just like that we have our new case study now it starts by like encouraging us to add some slices we can go ahead and select existing we're going to grab this Rich Text slice that we've been kind of ignoring for a little bit now and we can add that to this case study slice now it gives us the full UI for this page type and you see here in the static Zone we automatically have this uid and that's going to be the slug for our page so the uid here is Nike and we're going to add a couple more fields to this so that we can query that data and pull it into our case studies slice and display it here so you can see it says Nike designers at the legendary sportsware brand and we have Nike designers at the legendary sportsare brand as well as this image so these are the things Nike this bit of body description and this image that we're going to want to show off on this slice so we want those to be built into our static Zone we we don't want to have that as a slice we need that data available for query so I'm going to start off by adding a new field and we could do a key taex for this but uh so that it shows up nicely in the CMS I'm going to choose Rich text and I'm going to call this company so this is going to be where we put the word Nike and for company we want to unselect everything and just push H1 and we don't want to allow multiple paragraphs for that so click done next we want to create another Rich Text field and this one's going to be a description so I'm going to say description just like that and for this we only want it to be a paragraph and not not allow multiple paragraphs for that one either now we want to add the little logo image here so go ahead add an image and we're going to call this logo image just like that and the nice thing about adding page types is we automatically get this SEO and metadata tab that comes with the description the image and the title so going to move the title up there uh just you know that order makes a lot more sense so we are set we can now create a slice that references these page types specifically I'm going to go to view changes and just push this so it's up there but we don't really need it just yet head to your slices and we are going to create a case studies slice case studies think I might yell at me yeah so if you see this it's it's not super clear but it's because uh you need to have it as one word if you have a space here it's not going to tell you but uh you need to name it like that so go ahead and click create and let's look at the actual slice and see what we need we need a heading we need a body and then we're just going to have this part as a reference to a case study so that's going to be a Content relationship so in the non-re repeatable zone we're going to put that heading so go ahead Rich text heading done that a bunch make this just an H2 I don't need multiple paragraphs there uh add another field this is going to be our body and we're going to unselect everything but paragraph and now because we want them to be able and and by them I mean our content team to be able to add multiple we go and add that to the repeatable Zone we're not going to choose any of these uh well I mean not any of these except for a Content relationship um this is what we're going to use to link to this case study so I'm going to say case study just like that and now they will be able to pick case studies to link to so let's go ahead and review our changes and we're we're missing screenshots sure we can go ahead and update that screenshot thank you for reminding me uh slice machine and I'm going to say the case studies one going to drop that in there and like we said it's it's an aspirational goal that screenshot it's not what it looks like just yet but that's all right so now we want to create a couple uh we we want to create those case study documents really quick so let's go back to the documents list here I'm going to zoom in a little and I'm going to click create new and it gives us the option of page or case study now notice we can't create a settings file anymore because that settings document's already been created so if if you're curious about that like where did that go it's because we already have it and that is a single document once you create uh a single thing it it doesn't give you the option to create another one but case study and Page are repeatable types so we can create as many as we want go ahead and create a case study I'm going to call this one Nike you can call it whatever you like but uh we you you only have these images for Nike and prismic so I recommend that uid like I said it's going to be the URL slug that we get so go ahead and name that Nike that needs to be unique that's the U for uid and then going to say Nike and I'm going to copy the description from here and fill that in just like that go ahead and select the logo image right there and let say the Nike logo all right and that's all all we're going to have for now that's all we really need right now um we can come back and add some other slices and things later we can add some rich text in a little bit but right now I just want this data to query for uh I'm going to hit publish and then we're also going to do the same thing for prismic just so we we can have uh several documents to query for go ahead and create new do the same thing I'm going to say prismic and the uid gets entered automatically if you do the title first that's pretty cool uh and I'm going to go back let's go prismic and headless page builder use glisten to change the way websites are made it sure did uh the prismic logo cool add to page save that uh rename it up here too and hit publish cool so now if we go back to our documents list we see that we have two case studies that we can query if we open up our glisten AI repository here or uh yeah our our vs code we have our case studies slice those automatically generated for us and what we're going to want to do is as we pull off the items off of this slice we want to look at those and see okay if there are case studies referenced we need to fetch that data because that data is only going to have a or the slice is only going to contain an ID that references the case studies it won't have the title of Nike and the title of prismic and the description and the logo and all that so we need to make an extra fetch but because this is in a react server component we don't need to worry about a performance hit for that so because we're going to be fetching inside this component there's a couple of changes we need to make first we want to make this an async function so put it right after the equal sign equals async and then that's fine but this is saying hey that's that's not what you're returning now so put this in between angle brackets and put promise at the end at the beginning having trouble spelling right now there we go co so this is saying that this is going to return a promise which resolves to a jsx element now just like we did our uh data fetching in our or from our settings data in both our header and our footer we need to do a another client request here so I'm going to say const client equals create client and once again you have these two options choose the at/ prismic iio that is the local create client that already has all your information there so now we've created the client and now we want to grab those case studies so say const case studies equals await promise.all and then in there we're going to have slice. items. map and that is us going through the items and pulling off each one and saying Hey give us this case study so it's going to be an async arrow function and this is going to give us an item and we're going to say if is filled content relationship oh we need to import is filled first go ahead and do that and then content relationship it'll help us out a little bit and we'll say item. case study so if there is actually a case study filled here now we can fetch that case study uh and so if that's filled return wait client. getet by ID and then that we're we're going to type that with content. case study document like that and go ahead and import content if it's not already there but it should be yep we are we are set there so we're going to await that and in parenthesis we're going to return item. case study. so we are fetching the so yeah I'll I'll remove this typing real quick so you can see what we're actually fetching so we're using the client to get by ID specifically that case studies ID we're just adding that bit there to type it appropriately so that case studies is typed and that's really really helpful we're not using case studies right now now but that's all right we will in just a sec so let's go ahead and grab the other components that we need here uh wipe out your boiler plate there let's go to that slice let's grab our case study slice and grab these two code Snippets here we got to copy that and we'll copy that body and the case stud is going to be a little bit different it says uh a prismic next link we will be kind of using that but not in in the the way that you think so with case study because we're doing this fetch we're not going to be following the snippet that it provides we are going to be looking at this data instead go ahead and import your prismic Rich text and those should be set they're not styled yet but that's all right uh let's go ahead and focus on the case studies first so we can go ahead and say uh mt20 hit tab we now have a nice little div going to say grid and GAP 16 in there and then inside that div if we want to map over our case studies so case studies. map and inside that we're going to do an arrow function and from that we're going to get case study and index we'll we'll pass the uh the index as a key on this one so we're going to say case study just to make sure that it exists and you know in case the fetch came back and it didn't work we just want to do that that quick check case study and and we're going to do parenthesis again and we're just going to put a div here and give it a key and that's going to be case study. ID that should be unique let me move this up and then inside there we can take actually a a look at what's on case study so you go case study and then data because that's where the uh fields that we set up are going to be so we see we've got company we've got description we've got logo image and then as I showed you that other tab we have the meta uh details here but company description and logo image is what we want to show on this slice so that's perfect so on here this is going to be an H3 because that's an H2 uh this is going to be just a regular prismic Rich text and this is going to be a prismic next link so let's set those up so back here in our code we're going to get rid of that I'm going to close this div just to have it stop yelling at us uh let's go ahead and create an H3 and inside that H3 let's do a prismic text just like that go ahead and import that and the field is going to be case study. dat. compan just like that now we we need to do prismic text because if we remember uh that's an H1 over in our uh our case study page type and we don't want it to be an H1 here we need to be an H3 so make sure you do it just like that let's go ahead and give this H3 uh class name uh for XL just like that and then we're going to do the body now so uh just make a paragraph and inside there we can do uh K oh wait I actually do prismic rich text here that's perfect just like that import that field is equal to case study. dat. description and that should come out just great all right and then after that we want to have our prismic next link that points us towards the case study but also has uh the company here it says read Nike case study and we're also going to want to use an icon for this little arrow there so let's go ahead and set that up we're going to bring in prismic next link import that we're going to say document is case study now this is a special field on prismic next link it knows what to do with this document field so we're going to say uh that that we're going to hand it the case study document and it's going to know what to do with that and create the link for us automatically once we set that up in our router so I'll show you that in just a little bit and we're going to add a class name to that we're going to say after absolute say after inset hyphen zero and hover is underline now why are we doing this after absolute after inset zero well we actually need first to add relative to this div up here the div that gets this key that's where we want this link to kind of spread to so let's go ahead and add some styles on this div up here so say class name is equal to relative grid Gap 4 opacity 85 transition opacity duration 300 hover cursor pointer hover opacity 100 MD grid calls 2 and MD Gap 8 and one more we have LG grid calls 3 all right we just added a whole bunch of classes there what do those do and especially why do we have this after absolute after inset zero so we want this link not to be confined just to the actual text there if if we remove well actually we can't see this just yet but I'll show you here you see how if I hover over any of this um it it becomes a link and and if I click on it it takes me here that is the or or a proper way to handle links on big items like this like on a big card if I if I wrapped the entire thing in a link unfortunately on screen readers the screen reader would read out that the link is Nike designers of the legendary sports brand and then also this when really the only thing that I want that screen reader to read out is read Nike case study and the rest I I would like it to be clickable but not read to screen readers as the link so the way we do that is we give the after pseudo element um we we make it take up the entirety of the card and the the bounds of that element are now the bounds of this uh full div so as you can see as I come down here it stops and that's a nice little trick to make the whole thing clickable without messing up your accessibility so that's why we're doing that and we also have some hover effects in there too that's where the uh opacity 85 and then on Hover opacity full come in oh and I I have a an error here where I need to close that prisic next link so if you if you followed me to the letter uh that is I I actually don't want it to self close I want it to be just like that there we go CU we're going to put some things inside it that's where we put our read and then we need to put like Nike uh case study and right here where I just pop some parentheses we're actually going to bring in prismic text like that and we're going to say field is equal to Case study. dat. compan and self close that that's just going to render out a string so it's going to say read Nike case study just like that now we have our classes on our prismic next link on our prismic Rich Text here actually want to add a little bit of spacing so go ahead and put a div around that with just max W uh medium or MD and that's just going to make sure that this doesn't uh spread too wide now we've done a lot of styling here but we don't have anything to look at yet so let's actually hop into prismic and not only add that slice but make sure that we are linking to the n and the prismic docs or or um yeah the the the document there so first we need to make sure that this slice is added to our page type not sure if it is Bento no we need to go ahead and add it select existing case studies there we go and now we can review that change and push that to prismic so we are now able to use this slice in our homage go ahead and do that in your homepage just add it at the bottom here underneath showcase and I'm going to say case studies there we go and it's at the bottom now so our heading what's our heading again ah designers like you love kissen so we're trying to sell them on hey really popular designers like Nike and prismic use kissen so you should too uh in the repeatable zone we're going to say add item and the only thing we have to do is choose case study uh link to prismic page is what we have to do so uh let's go Nike for the first one and then add another item and prismic for the second one go ahead and click save and publish now let's go check out our homepage and see what we're working with uh designers like you love glisten that's what we expect because we we didn't style the uh that element at all we didn't style that either and then we have this kind of grid setup where I thought we should see some styles on that heading but maybe we didn't add those yet that might be on me yeah we well we added 4XL so that should be coming back a little bit different than it is I'm curious Ah that's because the class name of for XL doesn't tell you uh what it's being applied to so I need to do text for XL there we go that's definitely what we are expecting now uh we see that the layout isn't right so let's go ahead and fix that so we want to wrap our H3 all the way down to our prismic next Link in a div and we want to give that uh class of flex so go ahead and say flex and bring that all the way down so now we have this Flex div that wraps around the H3 the body and the link if we go ahead and save that we still won't get what we want because we need to make this uh we we need to add a couple Styles so we're going to say call span one and flex call and justify Center Gap 4 see what change that makes and and there we go so we see that our text is now stacking like we expect it to as it is over here so the text is stacking and we need to bring in our logo image next so underneath that div not inside that same div but underneath it go ahead and bring in your prismic next image just like that and did that oh it's it I I I thought it didn't import but it's only yelling at me cuz hey you didn't give it the proper uh properties that we need so field we're going to pass that in case study. dat. logo image and you'll know what to do with that and then I I want this to be really high quality so I'm actually going to pass another prop called quality and going say that's at 100 because I want to be really crisp and then here we're going to actually have a class name and open the curly brackets on this one because we're going to be using clsx and this is how we're going to do our styling um clsx or or sorry uh this is how we're we're going to do the fact that every other one flips like this you see how the first one image is on the right second one imagees on the left we're using clsx and uh a little bit of math here to handle that so first put some quotes and say rounded XEL and then LG call span 2 and then if a uh outside of those quotes put a comma I'm going to say index that is as we're iterating through each of these items it's going to start at zero then be one so index modulo or the percent sign two and and put quotes and say MD negative order one so what is this oh and uh make sure you import clsx otherwise they won't be happy uh and I'll I'll explain this in just a sec I just want to see the effect of this first um there we go it's saved and over here on our page we can see that it is working as we expect it's a little bit ugly we we we didn't apply bounded or anything to this this uh slice just yet but if index is an even number then this value will be zero and this will not be applied but if index is an odd number then this will be applied and it's going to shift the order so that the image comes before the text and it gets moved to the left really easy way to have your images and text alternate as you add slices uh and this is you know infinitely scalable so let's go ahead and finish these styles on this slice uh for Section we're going to say bounded just like that import that make sure that it got added down there cool we'll see that that should automatically make it look a lot better let's take care of our headings now going to come up here to my heading and I'm going to change this to a prismic text just a nice easier way to kind of style your H2 so I'm going say H2 Max W2 XL open that up pop the prismic text inside and continue to style text balance got to have it text Center text 5 XL and font medium MD text 7xl now by this point you might be saying well we we're kind of doing a very similar class here for for a lot of these you could definitely uh refactor this out into its own component I've done that in previous videos uh some people said that like that refactoring was a little bit time consuming or they they just didn't like that as much um so we're we're just handling it this way for for for this class but uh or or for for this course but totally fine if you want to refactor this out into a like heading component of some sort then for the pris rich text here we're going to just uh wrap this in a div so we're going to say perod MX Auto and wrap that around continue to style mt6 Max wmd text balance text Center text slate 300 always feels weird to say Max wmd just yeah just a funny phrase so we save that and we see what we like that's looking really good now we get that nice little uh effect there on the glow the image is is super high quality everything is looking good I think that's it and this is one that doesn't have any fancy animations at the end so yeah we we are we are good on the styling here now here's the only problem though if you click here uh nothing happens it just takes you to this same page why is that I thought we we set up a next link and shouldn't that be taking us to a page well here there's a couple things one we never actually made a page for these case studies right we we we never did anything to say what that's going to look like so we need to go ahead and build our case studies page so I guess I click it on the live site we see we get Nike nice little case study and we get this page we need to set this page up so let's do that now so if we go to our app folder we see that we have a few pages here we have our just default homepage we have uid which handles things like that features page and any other page that we create with that page type so we need to create a new folder and Page within that folder to handle this new case studies uh URL path that we want to create so go ahead and create a new folder call it case study just like that hyphenated and we're going to create a page. TSX in here just like that ah and my apologies uh this will will handle if someone goes to just case study but we actually want the pattern like we have on our site of case study SL Nike and then we want to use this Nike uid to query prismic for that page right so if someone goes there we want to go to prism and say hey do you have a case study with the uid of Nike and then get that data back so we need to add another folder here just like we we have above want to call it bracket uid and that's how we handle Dynamic routes like this so go ahead and do that and we can move this page. TSX file inside there and yes I am positive I want to move that so you should now have case study uid page. TSX and you can confirm it up here Source app case study uid page. DSX now normally uh querying data getting all this kind of stuff set up for a page can be kind of timec consuming and that's why I have some really great news uh if you head to slice machine and go to your page types we're going to go to case study here and up at the top we have this little button called page snippet that does not get enough attention doesn't get enough love because this is a really cool little button this allows us to create this case studies page component uh from some really great boiler plate so let's copy this and we'll talk about it in just a second um I'm not a fan of just telling you to copy paste stuff and be like ah don't worry about it CU you know if anything if if you need to change something for your project or just do anything on your own that's not helpful at all you you are then completely stuck and Stranded uh that's what we call tutorial hell right where you're like I can I can make the thing in the tutorial but if you want me to make anything else I can't do it I definitely don't want that for you so let's talk about this briefly uh we have a few functions that we are exporting here we have our page here and and it might seem very very small but yes this is the entirety of the page we're going to expand this a little bit uh we also have our metadata this gets as you can see the title and the description from prismic in in that second Tab and uh creates some metadata for us and then we have our generate static pams and this is actually what handles the routing there so remember I said it's going to ask prismic hey do you have anything uh called Nike or or with the uid of Nike or prismic right uh that's what returns all of the options that we have so it's going to actually create a client and it's going to get all of the case studies and then we're going to return in an array of uids for nextjs to know all right here's all the case studies I have if any of these come back in the URL you know we we've got them and and you should build Pages based on them and up up here we have the type for the prams and just saying hey we're taking in a uid and you should expect that to be a string and so once we get the the uid we're actually going to fetch it in our page so we create our client and then we go ahead and get by uid a case study with the uid that we're getting in the prams and if it's not found then we're going to render the 404 page for this site and then because it's a prismic site we just kind of default to rendering the slice Zone and that should have all your components for this page in particular we're actually going to bake in some things that uh you you don't always have to do like for our our homepage uh we we aren't adding any new components it's just the slice Zone but for this one we are going to actually uh bake in that Nike header and the star grid and things like that so that um if you go and create a new case s those are always there that that's not a slice that we're adding so to do that first things first wrap this in some parentheses because we're going to be adding some more elements to it and we're going to import bounded go ahead hit enter and I'm going to just real quick uh move that to wrap around the SLI Zone there we go now bounded defaults to a section but because this is more of an article we're going to say as article just like that and that's typed so uh you can't just put in anything it's going to say that's not uh in in H HML element I'm expecting something real so as article then we want to open up a div here and we're going to say this is going to be a grid and inside there we want to import our star grid and we going to say slash or or or we're we're going to close it uh then I want an H1 or you know what yeah yeah yeah we'll we'll do it this way we we could keep it as prismic Rich text but uh I prefer this way of styling these things um especially because we are going to pull in um kind of a longer heading so I'll I'll show you in a sec so H1 class name is going to be text 7 XL font medium just like that we can close that and inside there we're going to do prismic text and the field is going to be page DOD dat. compan and we can self-close that but we are not out of the H1 yet so still inside the H1 we're going to open a paragraph tag uh with text LG once again it just saves time for the class name uh thing because I I don't have to type class name each time and we're going to hard code case study right there so back inside the styles of this paragraph going to say text LG text yellow 500 just like that I think we have all the Styles we need on that H1 so let's take a look and see how this is looking uh we we still can't use this link and that's okay but if you go slcas study Nike we should see something here at Le I'm expecting to there we go now our star Grid's way over here it's kind of wild but but we are seeing that heading there we are seeing the case study underneath it now the reason we're doing that uh we're doing everything inside this H1 is that way the heading uh the the H1 heading for this page is not just Nike but it's Nikey case study because I I just think that that is more um good context for a a H1 heading to have but uh stylistically we didn't want to say Nike case study we we kind of like the way that this looks now let's go ahead and fix our star grid as well as the placement of these items and the centering of the text so back up here where we have grid let's add a couple more classes let's say relative that's going to fix our star grid and we're going to say Place items Center and text Center just like that and we should have a uh that's the final version this is our version and it may seem like we have broken our star Grid or gotten rid of it but it's just really small because it is fitting to the uh parent element and right now the parent element is as big as the word Nike so don't worry we're going to bring that back with the next couple things that we change we are going to add the description as well as that image so just after the H1 but still inside that div we're going to create a paragraph tag with a class of mb4 open that up and inside there we can uh we can do a prismic text and we're going to pass that the field of page do NOP page. dat. description great and we can close that and inside this paragraph tag we can continue to style this out and say mt8 it give us some space above it Max width XL text LG and text slate 300 and just beyond that we're going to pull in prismic next image and pass that the field of page. dat. logo image and class name is rounded LG excellent and once you've got that all typed out go ahead and hit save and we see our star grid is looking much better um our image is coming in but oh boy it is getting compressed and it's not looking great so we're going to toss on that next image another quality of 100 it's not going it's going to you know um be a bit bigger of a file you can maybe drop this down to like 95 or something but um for this I think the quality really matters um and you know as I zoom in it's it's not this big of a file so you're you're going to see it not looking great but at its size it is looking real good so we are set there now we just want to wrap something around our slice Zone to give it a bit of centering so we're going to say uh MX Auto and there we go we're just going to wrap that slice Z and that should be it now the only thing is uh as we work with our Rich Text slice it's not going to be too pretty but uh let's go ahead and head to the Nike case study yourself and grab some of this laurum ipsum text and then once you have that head to the document for the Nike case study and come down here I'm not sure if we added the rich text we did okay so we we have the rich text and maybe we can give it a better screenshot or a thumbnail at some point but for now just go ahead and choose that and type in your uh text here you might not have an image available and I think that's because as a default I'm just going to hit save real quick as a default the rich text slice that ships with this minimal starter doesn't allow for a few different things so yes uh so I I moved pretty quick there so in in your slices and slice machine go over here to Rich text and we see it say content go ahead and edit that and we're going to come in here and just turn on I'm just going to turn on the the rest uh yeah I I guess I I could have just done that but I'm going to make it a very versatile uh Little Rich Text field going to hit done it's already saved and we're going to push that chain I'm okay with it not having a screenshot and now in our uh Nike case study we should be able to hit forward slash and get an image so go ahead and type that feature image and say select image I'm going to choose one of these things that feel kind of case styish I'm going to say a designer drawing on paper add to page there we go it's added to the page um you should be able to click underneath or maybe let's see here we go you might have to Arrow key a little bit we're we're we're working on making that a little bit Slicker um but yeah we can add a little bit more uh text here to make it feel a little more genuine and we hit save and let's hit publish and there we go so over here in our Local Host I'm going to refresh this and oh it's just not doesn't feel as good right like this this looks pretty nice like this could be a live sites blog post for sure uh this isn't this isn't that great over here so what's going on here we have the typography plugin with from Tailwind doing all the heavy lifting and it's really really great so let's go ahead into our Rich text component uh or our our Rich teex slice I should say and get that set up so all we're going to do in here is change section to bounded like that and then wrapping around this Rich text we're going to say uh pros and we're going to wrap it in that div I'm also going to add a couple more things remember you always have to add uh Pros invert if you have a a dark background so Pros invert as well as Pros LG and this allows you to change the size and see how all all the things that it brings with it like this is the stuff that I don't want to have to type myself you see what I mean this is this is what Pros does for us it's so nice uh so Pros LG and then we're also going to add a color for our gray because we're we're using slate in a few places uh instead of just the standard gray so Pros slate and if we save that we should come back and this is the live site and this is our local site and that looks so much better this image is going full width to our bounded box that's fine but this looks so much nicer it's even got like a little bit of a blue tint to the text and there we go just like that we've got our case study page up and running the only thing that we need to add to it is the CTA but we haven't built this slice yet we can come back and add that later now uh you might say okay now I should be able to click this link and go there but no it still doesn't seem to know where where that case study is and that's because we're not actually telling it how we are routing to that uh page so down here in our prismic .ts right here it should be inside uh your Source folder close everything Source there it is uh you need to add it to this routes object so right underneath the page home here going to create a new object say type is case study it's filling it in for me and the path is exactly that path is going to be forward slase hyphen study forward slash and you need to put this little Co in here that tells prismic that hey this is a dynamic property so it's not going to look for actual uid it's going to use that and and go grab the uid from the document so whatever is here that's what we we we went a route to so now that that's passed to our client config we can come back to our page and I think that reloaded on its own but I'm reloading it anyway now the link actually knows about um that way of routing so we're passing the document to prismic next link and now prism next link is informed and it says oh okay you're saying that you want me to go to case study SL Nike because that's the uid on that document uh we we should have a prismic page but um I mean like and we do but there's just no Rich Text there so feel free to do the same to your prismic uh case study I I won't walk you through that but you've got another image in there and you can add as much Laura myum as you'd like so after all that we have set up not only a case study slice that has some cool hover effects that has an alternating image setup and also has some good accessibility features in that it has the full link but only shows this text but also we've created our second page type so now you know how to handle things like blog posts and other stuff with prismic you know how to link to them you know how to do a a a whole lot of stuff and we use the um typography plugin for Tailwind like there was a lot packed into just this section so definitely pat yourself on the back you just handled a whole bunch with a seemingly simple slice but uh it it does a lot so great job all right it's time to build one of the more complex slices on our website this is what I call the Integrations slice and you can see eventually we're going to have this cool animation but we also have a few other things that kind of complicate it uh this star back here is actually an SVG over top of this background gradient image so we've got to kind of layer a couple of things on top of one another this is the logo for glisten but all of these other logos are able to be selected in the CMS so we need to map over an array of icons that we're getting back from prismic so there's a few different things here uh and the animation is going to be in the end of this course but let's get into it right now we're going to start off by going to slice machine heading to slices and creating a new one we're going to call this Integrations hit enter and it will create our slice for us great now let's check out the fields that we need like the other SLI is we're going to need a rich text here and a rich text here and then we're just going to need a select for these icons and we'll give a few options for the icons so let's go ahead and add a new Rich Text field we'll call this heading you know the deal by now we're going H2 only I'm going to disallow multiple paragraphs create a new Rich Text field type body and we're going to disallow pretty much everything except paragraph you can add back in bold and italic but I'm disallowing multiple paragraphs and now in our repeatable Zone we're going to say it's an uh select we're going to call that icon and because it's in the repeatable zone that's what allows them to choose as many icons as they want you will recommend to your uh content team that they choose kind of an even number so that it gets divided evenly but uh in the icon field go ahead and edit that we don't want options one and two we want to add some of the logos that we'll be working with so go ahead and all lowercase type Cloud flare Cloud FL l r e just like that type npm I'm going to add a few more options uh let's go to six I'm going to say geub I'm going to say figma digital d t ocean and fly for fly.io cool and uh these are logos that I found within the font awesome package that kind of seemed like they would fit for our app so make sure yours match pretty closely to this and then go ahead and click done and now let's take a look at our slice inside our repository we have this integration slce mine gets a little funny icon because of the name but don't worry about that uh we're going to want to put some things in this Integrations folder we're going to start by grabbing one of the components that we have in our notion doc so go ahead and create a new file and call this star background. TSX just like that and then head to the notion Doc and you should see Star background. TSX and we can talk briefly about this but really it's just an SVG you don't really need to know too much about this uh this was just an export from figma and this was turned into a react component by pasting it into SVG to jsx you paste your SVG in here and it turns it into a handy react component for you taken care of no worries there so while you're on the notion doc go ahead and grab stylized logo Mark as well well and back in your Integrations folder go ahead and create a new file stylized logo mark. TSX just like that and paste it in and once again if you're not sure where it goes this should match up with what you have right here so go ahead and hit save we're going to be using both of those in this component or in this slice go ahead and open up that slice the index. TSX and we can start by pulling in bounded just like that make sure that Auto Imports looks good put a class on that and we're goingon to say relative and overflow hidden because our uh svgs kind of fall over the edge so if we don't have that it'll just stretch out we don't we we we want to hide what's overflowing now here we can wipe out the middle here and we want to add our star background and it's okay that it Imports it right from slash because we're collocating all of these files here inside the Integrations folder so I know that this isn't going to be moved around too much um no need to do the at components bit one thing I should point out about star background though is I do have a couple classes on here so it's not it's it's it's a bit more than just pasting it from SVG to jsx um but it's absolutely positioned so that's why we need relative here and we are moving it over a little bit we're shifting it uh a third up of the way and we are we're we're centering it but not exactly ly so that's what this is is doing so we're using translate and we're using top and left in order to shift it around let's head back to it so we can see what effect that has if we go ahead and simulate it we're going to need some things inside here because it probably isn't going to take up too much space but uh we we can see that star background already coming in now to get our background background the actual grading in the back we want to go ahead and pop open this prismic course images folder that we that you should have from the zip file and we have this integration background file here go ahead and drag that into your Integrations folder and I'm just going to rename this so it's just background um because it's going to be local to this file so close out of that and then here just before star background we can go ahead and say image and we want to import that from next image and going to say source is equal to background and we need to import that so up at the top go ahead and say import background fromb background. jpeg just like that now we can finish with our image right here we can go ahead and close that but we're going to need to pass it a couple more properties because we're using next image here and it needs to either have the size of that um or the fill property and some some other things so we want to go ahead and add an alt and because this is decorative we need to just say close quotes um screen readers don't need to know what this background is it's just a gradient it doesn't add anything any kind of information to the page so we're going to say fill class name is going to be object cover and we're going to do outside of that equality let's say about 90 yeah let's just go 90 I'm always tempted to to boost it up to make it look better but we need to worry about performance more so we if we reload we see that coming in in the background now it makes sense that it's this small our uh bounded element is giving it a little bit of padding but there's nothing in here so let's add some stuff go ahead to slice machine grab your code Snippets go ahead and copy and drop those underneath star background here get your prismic Rich text as well as for your body and then here we're going to Loop over the these items in just a bit but if we go ahead and import this now these are going to get pushed to the back if we don't give uh them their own positioning so let's go ahead and type period relative like that and if we wrap those in that div they get pushed to the front so there they are so now let's go ahead and style these out how we have been doing it for pretty much the entire uh course in fact if we go to our case studies uh we could probably grab this H2 as well as this body maybe and let's go ahead and bring that over to our Integrations uh because we're using the same heading and body uh that should translate we just need to go ahead and import prismic text from prismic react let's see how that looks that's looking pretty good so I do it all the time but um if you ever want to see how things are adding up if like how they're building on top of each other just go ahead and you know comment the star background out or comment out some of these classes and see the changes that it actually makes but for now let's go ahead and let's build out this next part with each of these logos first we need to get some logos so let's go ahead and we need to do some importing at the top here open and import so we're going to say import we're going to do curly brackets and we're going to skip to the end and say from react icons and you're slash F6 so that's for font awesome 6 and the reason we why we skipped now it will help us with our import so we say fa a digital ocean we can just kind of hit enter and we don't have to type out the entire thing we's say fa Cloud flare there you go f npm fa a GitHub fa figma and Fa fly just like that so you should have our six Imports and it should match up with the Imports or the icons that we selected in our select now we also want to import our stylized logo Mark Al the uh so import stylized logo Mark just like that and from period slash and that should be good for our Imports for now now let's talk through a little bit of the logic that we're going to go through here what we need to do is we need to Loop through the array that we get back back of these icons but also put our logo in the center and then continue with these icon so basically we get an array back of cloudflare npm GitHub figma uh digital lotion and fly and then we need to say okay go to the halfway point add this logo in make it very different than the others and continue with that array so we're going to be looping over the array and splicing in when it gets to the halfway point so we're going to come down and we're going to go inside this div so make sure you're inside the div that is relative and we're going to create a new div we're going to say mt20 go ahead open that up and continue to style so Flex Flex call items Center MD Flex row just like that and then inside that we want to Loop over that slice items so slice. items. mmap just like that and we're going to pass that in Arrow function that implicitly returns so two parentheses inside the arrow function we're going to get item and index and now we need to uh create a react fragment because we don't want extra Dives and stuff um but to create a react fragment inside of an iterator like this we need to actually use react. fragment we can't just use the fancy little fragment syntax so go ahead and say react and we need to import that react. fragment and key is going to just be index and that's fine because we are um like the order isn't going to be changing on this um see do we import the right react yep that's fine not sure why it's oh cuz this didn't get the dot fragment I was wondering why I was yelling at me there we go so now we have our fragment set up inside of that we need to check whether or not we have hit the halfway point just yet so we're going to be using index a bunch in this little uh bit of code so go ahead and open curly brackets and say index is equal to math capital M math. floor parentheses slice. items. length divid two I'll explain this in a sec and then outside the parentheses and and and we're going to return our stylized logo Mark if that's the case so uh first open up a fragment and then inside there we're going to say stylized logo Mark that doesn't need any classes or anything that's already on the logo Mark and then div class name I'm going to say signal line and that is going to tie up to a CSS class that we have in our Global CSS that we can talk about I'm going to say rotate 180 and BG gradient to T to top and close that div on itself and so you should have a fragment styliz logo Mark a div and then a closing fragment now if you go ahead and save that we can actually see that yeah we get our stylized logo and we get a line so that line is essentially going to be what we put in between each of our items and because we've created this we we're going to make an icon then a line icon then a line icon then a line we say ah we're at the halfway point create an icon and a line and then we continue through our Loop and we're going to obviously just not put a line at the very end so we found the halfway point let's continue to Output our icons all right go ahead and type period pulsing easy for me to type icon and continue to style this out so we're going to say uh it's me quite a few Styles here so just get ready so Flex aspect Square shrink 0 items Center justify Center rounded full border border blue 50 sl30 going to drop to 30% BG blue 50/25 P3 text 3 XL text blue 100 opacity 40 MD uh text for XL and LG text 5 Xcel so go ahead and hit save if none of your things shift to the top uh puling icon should be your first CU that's not an actual Tailwind class so a whole bunch there we will see the effects once we get some icons inside so actually we should see let's see our simulator we get one icon ah because we are looking at dummy content so it's just Cloud flare if we add more items to that group um we will see more and more of these and see how it's shifting it to either side we don't have an A a second line just yet so we're just getting empty little circles but we will get those soon so inside that big div well that that normal siiz div with a whole bunch of stuff in it uh we are going to Output our icon in here so just like we did before with our uh gear and our um arrows we want to go up into our Integrations and we want to create an icons uh object so const icons equal to object and we're going to we're going to match exactly what we have coming back from prismic so all lowercase for each of them if you need to reference it you can just go over to here and make sure that it matches exactly what you have here so Cloud flare and then we're going to say uh fa Cloud flare or yeah yeah Cloud flare like that and go ahead and close it and make sure you get all of them might want to go in order from this so yeah we'll just go ahead and do that I'm going to bump Cloud flare down digital ocean like that cloud flare make sure it's a comma Cloud flare npm F [Music] npm GitHub fa GitHub if you have a co-pilot on it will have taken care of this for you by now but I know not everyone has that so I want to show it I want to show this course exactly how everyone might be experiencing it so just like that we have all of our icons that map to Icon components and the great thing about these icon components is that uh yeah it's going to be tough to actually drill into one of them but um if if we look at the output once once we have it up and running we will see that they go off of the current color so that's why we're setting the text color here because that's actually going to set the color of the icon so let's go ahead and first check for the icon so item. icon and and icons item. ion just like that and we should see if we go back to our simulator there we go in the two that we've selected cloudflare GitHub uh npm figma digital ocean and fly I think that's all of them yep that's our six we have our icon showing up and you can see the opacity has dropped because we're kind of waiting on that animation to boost the opacity uh if you are going to launch this without going through the animation part of this go ahead and just bump this up to like a 90% opacity and it will look pretty good you can probably tweak some things on this icon as well but I highly recommend you stick around for the animation because it really makes this component way better but we see that it is working and it's working well now just after that div let's go ahead and create that line so we're going to say uh a new div where we have class name and this one's going to be curly brackets that's why we didn't start it with a um a period like we normally do so we're going to import clsx go ahead and open those parentheses and we're going to say signal line and just doing that alone should give us some lines yeah there we go looking pretty good we'll handle this uh dangling line in a sec but in addition to just taking the line we also want to put comma and we need to see is this um past the halfway point or before and that's actually going to be really important later when we do our animation right now it's not going to make any difference but uh this will come in handy later so index is greater than or equal to math. floor parentheses slice. items. length ID two so if it is greater than that we need to so so wait that's the question and then if that's the case rotate 180 and if not rotate zero so essentially have no effect but it's just clearer to have that so you won't see any difference here but later on um it is the reason why that side goes to the left and this side with a different rotation will animate in that way but as promised we need to get rid of this last line here so let's go ahead and wrapping around the div you just created we need to have a conditional here so index is not equal to so you need to do exclamation mark and then double equals slice. items. length minus one and and and do parenthesis and move that all the way down underneath that div fixt your length and yeah so this will now check to see is this the last item in the array if if it's not go ahead and render this div if it is the last item in the array don't do anything so there we go nice little check all right and last thing we need to do is just fix the fact that this is off to left go ahead and say MX Auto in your H2 and there we go we are set honestly that's looking pretty cool like I said if you if you don't want to animate it um you can go ahead and boost the opacity here but the animation will be so worth it so we can go ahead and close out of this we can push we want first want to update that screenshot so go ahead and grab your slice thumbnails this one is the integration slice just like that and we're going to go to review changes and we we're already there we can push those changes up to prismic and then once we are in prismic go to the homepage and create this slice at the bottom wait for this slice preview to load in and we want our in integration oh we didn't see I forget this all the time we didn't add this to our page so go ahead add slices select existing Integrations add review changes push changes and now before our eyes we see our integration slice come in and go ahead and steal this text and the order that you uh put these icons in should not matter but body we got that there repeatable zone I'm just going to add a few uh six to be specific uh Cloud flare npm GitHub figma digital ocean and last but not least fly so hit save hit publish and now at our homepage we have all these gorgeous slices and we're going to scroll down reload the page reload it one more time and there we go Integrations Galore that that is looking really really nice well done uh and if you if you want to we haven't been doing it too much here but um go ahead and check it on mobile we should be good to go on mobile this one has a a different style compared to to the others and that like it changes pretty dramatically but at the same time it's still pretty similar um yeah so go ahead and make sure that these are all working on mobile maybe we can tweak that CU that's not looking too great on that uh setting but yeah always always always make sure and then that is that did that lose its Styles oh interesting okay let's uh let's go ahead and fix that while while we we are spotting it so that's our showcase slice let's figure out what's going on with our showcase cuz that is not how that should look we probably just have um here's our prison cheex H2 ah look see it got moved to the front and I did spot it so if if you had that typo then that's why but you probably didn't have that typo you you probably did it just right and uh there you go it's uh while we're here let's look at the spacing here let's see that image should have some some margin on it or something but uh let's go ahead and let's make it so that we are actually adding Gap to the parent div so we have this not yeah so that one so we have this grid but it doesn't have any gap on it so that this text here and this image are just kind of smos together I would like to handle it with gap but only on small screen so I'm going to say maybe Gap let's go8 and we'll see how that looks and we go MD Gap zero because we have a very finely tuned uh larger screen so that looks pretty good yeah I'm very happy with that that's looking great let's just make sure we didn't screw it up on larger screens bring it back out we want to change it from being MD to maybe LG um where was that I just added that so LG Gap zero so here we still get the Gap great and then on bigger screens Perfect all right so once again that was gap eight and then LG Gap zero to to remove that Gap so we don't have additional spacing in here so that looks much better and and you can go through if there's any other tweaks that you need to add to this uh go for it right so we're done our integration slice the last slice is going to be a pretty quick one we're just going to go ahead and bang this out youve it just needs three Fields so let's do that now all right last slice let's go ahead and bang this one out in record time let's go into our page types and right in our page we're going to add it there so we don't forget it later go ahead and create a new slice we call this call to action just like that Camel case no spaces and it's going to create it here we're going to add or we're going to jump into it let's update the screenshot right now let's not waste any time uh call to action there it is Drop That in that's what we're looking for and go ahead and create a new field you know we need a heading just like that what's it going to be an H2 we are moving fast uh we don't need a body for this one we just need some buttons so go ahead and create a key text for button text and create a link for the button link and just like that we are done with our Fields but before we jump into our actual component go ahead back to our notion do grab this plain logo. TSX and as you can see it is literally just one path it is a very plain version of our logo we just need the little white icon here so grab that and head into your code and next to the brand new call to action we're going to add plain logo. TSX you have so many fancy logos flying around we need to really clarify this one's it's pretty plain it's just a you say plain logo like that cool um and then in our let's go back it's bringing me back I'm going to close out all of these in our call to action slice we're going ahead and we're going to bring in the plain logo just like that you can close that change this section to bounded like that we're going to need to add some class names to this though so class name I'm going say relative text balance going add that so that oh actually we can move that to The Heading let's do that py is going to be 32 text Center uh font medium and MD py4 now just before our plain logo we're going to need to add a glow div so just type. glow like that and let's add some more classes in here it's going to be absolute netive Z10 aspect Square W full Max withth SM rounded full BG blue 500-50 sorry slash I keep saying Dash sl50 to drop it to 50% opacity blur is is we're going to be in square brackets cuz we're setting this ourselves really boosting the blur on this one 160 PX and then make sure you put in filter so that nothing so that Tailwind knows it needs to add some filters to this great so we should have let's go check the simulator we don't fully need to but let's do it anyway there we go we have our nice blur and we have our little icon that's coming in great now we need to make that icon look like it is on a uh first off this div and then the glassy background so let's go ahead and do that in uh wrap your plane logo in a glass container like that and then add some more styles to this class container div so rounded LG BG gradient to B from Slate 800 to slate 9900 P4 and MD rounded XL like that and so we should see that's the final version and this is our version not bad not looking great though ah it's because I actually put py4 that should just be P4 for padding on both sides there we go looking a lot better now let's go ahead and handle our heading so drop below that little glass container uh we're going to make a div with mt 8 and inside that we're going to put prismic text like this I'm going to say field and you can go ahead and start typing slice. primary Dot and you'll see heading so if you don't want to use the code Snippets we you don't have to especially if you know you're not going to use the component that is recommended by default so uh inside the mt8 we're also going to put Max with XL and text 5xl this text isn't as big as the other uh headings on other components uh for this we need to import our button link go ahead and make sure that's imported and say field that we're passing to it is slice. primary. button link and then we can give this a class name of mt6 so that spaces it above and then inside there we want to pass it the button label so slice. Prime primary button text and inside there let's have a fall back just in case and say learn more like that all right let's check how that's looking let's refresh our slice simulator and there we go official gain I love the mock content we get from prismic so that's looking really good let's go ahead and make sure that's all set and we can push that so push those changes it's already added to our page let's check out our glisten AI homepage and wait for those to load in we have our Integrations and call to action at the very bottom to make sure they're acting AI powered insights for designers go ahead and add that our button text is start now we're going to link to the features page as always start now choose link type link to a prismic page and go ahead find that feat Page hit save hit publish and in just a moment we should see it over here there it is AI powered insights for designers looking just like our live site a little bit a little bit different the size we we might have a stricter um way of handling the size ah you know what it is it's actually that we took the text balance out of of bounded I I had it on the whole component originally but let's add it just to uh text balanced and let's see what difference that makes wait is it text balance oh text balance it was tough to tell oh there we go it shifted because it was recognized there we go looking a lot better I love the balance all right that is our component it is all set all right we are just about ready to deploy our website but we are seeing that uh that doesn't look so great on mobile does it we never built out our navbar we were planning to come back to it and this is the time when we're going to do it we want it to look much more like this where it has a little hamburger button a menu that pops out and we have our links here and that can go away so the way we're going to do this is we're going to kind of have a couple different elements that either appear or disappear depending on uh one whether they're triggered uh or also based on the size so as we get to a certain width the desktop links are going to come back in when we get a little bit smaller we're going to trigger the button to appear again so let's get into the code so go ahead and open up the Navar component and find the link that just points to forward slash isolate that a little bit and we are going to put a div around that say period flex and wrap that link in it give it a little bit space at the bottom we're going to put something else here it's going to be our button for our hamburger uh but let's continue just to style this div go items Center and justify between just like that and then down here let's put a [Music] button and inside that button we are going to put uh MD menu and we should see I was hoping that would Auto Import MD menu nope so we need to go ahead and import this ourselves from our icon package so come on up here and we're going to import and curly braces MD menu comma M MD close and that's going to be from react icons slmd so that where did our button go here it is so now we can put MD menu right there close that and underneath it we want to uh add a little bit of screen reader only text so go ahead and put span class name s r only and close that and say open menu just like that now if we look it's working but this button doesn't really do anything yet it's just a it's just a button it's not going to toggle anything we don't even have any like JavaScript tied to it so we're going to say button we going to say type say button and then we also want to put uh a class name on this and that's going to be block P2 text 3 XL text white and MD hidden so that on bigger screens it gets hidden there we go it's looking a lot better already and as soon as we get a little bit bigger it goes away perfect now we want it so that if you click this button it sets some state so in order to do that we need some state so go ahead to the top and we can import use sorry import use state from react like that and then right here we're going to say con open set open that's going to be that's going to equal use State and we're just set it to false as our default now that we have this state we can go ahead to our button and we can add a couple things we're going to first add ARA expanded and I'm going to say that that's equal to open so if open is true then already expanded is set to true and then we also want to set it set on click equals and this be an arrow function that gets called when they click that's going to uh just set open and set that to True like that great now we can go test that but right now this doesn't really do anything besides toggle area expanded to true so let's continue to build out this menu so let's go just outside the div that has Flex item Center justifi between go just outside of that and I'm actually going to hit uh control forward slash and put a little comment here cuz this it's going to get a little bit tricky so go ahead and add a comment say mobile nav just like that it'll be a little bit easier for you to manage um I think down here we can also put a desktop nav like that so we're now going to build the little uh div that slides out from the side and contains this button as well as the links and then when uh open is set to close or sorry is set it set to false that just disappears so let's build that out now so create a div and inside that we're going to say class name and we're going to make this set to clsx because we need to be conditional about whether open is true or false so clsx o that's clsx there we go and we're going to say fixed bottom zero right Z left Zer top zero uh we can also do inset for this but I think I did this for a reason uh I just don't remember off hand z40 Flex Flex call items end Gap 4 BG we're going to put brackets and we're going to set this to that same value we did before so it's going to be uh # 07815 just like that if if you need the value it's also in our background from before we just wanted to match that same color go PR for padding right four PT 14 transition transform tan s i t i o n transform like that duration 300 ease in out motion reduce transition none so that's colon transition none and MD hidden all all right so let's talk about this a little bit make sure you import your clsx um so this right here this motion reduce it it makes it so that if someone has this accessibility feature uh that all the browsers have set to True where it's prefers reduced motion is set to reduce then we don't do any kind of like swipe in from the side it's just going to make this menu appear so it's a nice little bit of accessibility there on medium screens in above this gets hidden regardless whether or not open is set to true we don't want it to show up at all um and I think that's about it yeah it's oh and and so now we need to um add the conditional that makes it open so open question mark translate x0 but if it's not open we want to shift it off the screen so translate X and in here we're going to put square brackets 100% just like that all right so we can go check that out and see how it's looking make the screen small enough and now we get this but we don't have any way to close it so we're kind of stuck with it now but it works that that worked we can refresh the page and it should go away perfect so we have our div that slides onto the page now we just need to put some stuff inside it right so we can actually go and grab the button from above grab that whole thing and we're just GNA tweak some features on it so type button that's true the classes are partly true but we need to add a couple to it so go ahead and add fixed right four top four and mb4 go ahead and save that already expanded this can stay the same because we still want to say whether or not uh that is true or false but on click instead of set open to true we're going to set it to false just like that instead of MD menu we want MD close and instead of open menu we want close menu all right let's see how that's looking we have our little hamburger menu click that and our X shows up looking great all right that part works now let's add some links in there so underneath our button create a grid div or a a div with class name grid we're also going to add some more classes to that say justify items end and Gap 8 now inside here we are going to Loop over the settings data navigation array so settings data navigation and we're going to map over that and we're going to pass that an arrow function inside that does not implicitly return because we need to do uh a check to see if that is a CTA button or not like we do in our other on on on desktop so item we're getting that in there we're going to say if item CTA button and we're going to return a different thing so return parentheses button link like that key is going to be the item label and field is going to be item. link can go ahead and close that and then inside the button link we're going to put item. label great and if it's not that we can go ahead uh go outside of the if so say return and we're going to say prismic next link because remember button link is just a fancy prismic next link just a one that we Stout a little bit more key is going to be the same item. label we're going to give this a class name of block PX3 text 3 XL and first it's going to have an Mt of eight so if if it's the first item we want to to have that margin top um but the rest will not get it field is going to be item. link and on click we want to make sure that the menu closes so we're going to set open to false so we're going pass an arrow function and say set open to false and you know what we probably need this on our button link as well so go ahead and paste that up here I didn't have that originally but that should uh that should be there too because if you click either of these we don't want that menu to stay open and now we want to say area current which tells the browser are you on this specific page like if we're on the features page we want um a accessibly to say that this link matches the current page so let's go ahead and do that ARA current like that and we need to do a little bit of uh nextjs Magic here so we're going to p in a hook that nextjs gives us called use path name so go ahead and scroll up to where we have our Ed state right after that go ahead and say const path name is equal to use path name and we should import that from next navigation and just close those parenthesis call that function like that so now we have this path name to work with come back down to your prismic next link and we're doing ARA current so we're going to say if path name in do includes it's a JavaScript function to see if something's inside a string parentheses as link we're going to import this from the prismic client this returns a link from a from a prismic link that we give it so item. link and then we need to type it so this gets a little funky as string that's a TP a uh typescript thing so if that is true true then we want to say page and if it's false we want to say undefined I know that's a little bit funky trust me I I I completely agree that gets pretty funky but uh that is is how we we we want to show that this is the current page that's how we're figuring it out here uh and then inside that so close that with an angle bracket and inside there we're going to say item do label after all that we we have quite the link here and you can go ahead and grab this ARA current and bring this up to our button link as well just to make sure that yeah uh we want to know if if we're on that page also so go ahead to your site check it out see if it works and there it is we're going to go to the featur page it doesn't have much on it but cool features there we go but yes our mobile Nav Now works it's looking good the only thing I'm seeing ooh it it loses the logo so we need to actually add a zindex property to this link so go ahead because um not just do we want to show the logo but that's our ticket home right we don't want to lose that so go ahead and put class name uh Z50 right on there and like magic it's there so that if we click it uh we should get take it home ah but we also need to add that set open property to that because I'm not losing the menu so grab that our onclick bring that to your link so that on click we o set open to false so there there we go so you see how it brings us to Features we see cool features the menu closes um but because it acts as like a pwa um we need to make sure that we don't just route but we also close and change the state of that menu great now the best part is our desktop nav is pretty much good to go except for the fact that uh it doesn't disappear and we have some um improvements that we want to bring to it that we just added like the ARA current and uh well we don't need to worry about the onclick just mainly the ARA current so come on down here we're going to say uh we want hidden CU that's going to be what it is on small screens and then MD is going to be Flex so we can get rid of this Flex right here let's see how that changes it as we shrink it we see it disappear just like we want that's looking pretty good but we can still improve it a little bit grab your AR current and go ahead and bring that down to your button link I'll put it after the field just like that as well as your prismic next link I'll put it after the class name just like that and there we go with a little bit more logic we have a working mobile nav that is accessible and has everything we really need it to so without further Ado let's deploy this thing get it live get you a nice little subdomain on versell and uh get it going all right so like I said we've got the base of our site done we're just missing some animations and some other nice touches but before we add those let's get preview setup and deploy the site to verell to do that first we need to put it on GitHub if you're using vs code you can go ahead and click this Source control button and you can click initialize repository if you're not using VSS code you can go through get a knit in your terminal and take that route I'm going to show you uh the vs code way just cuz it gives you a nice little gooey now we have all all these changes and normally we would have committed a while ago but just for the sake of this course let's go ahead and say initial commit just like that go ahead and click commit and now we can publish Branch but it's going to say whoa where do you want to go do you want to go to a public or a private repository uh you might not have your GitHub linked to your vs code and so for that reason I'm not going to do either of these but just but if you do go ahead and take that short cut it's pretty nice to have that all integrated for me I'm going to go through GitHub itself and if you don't have an account go ahead here and click sign in like every other account that we're using for this course it is a free account you don't need to pay for anything there and you can go ahead and click new repository I'm going to call this kisten Ai and it is available because it's just you know for my own name I'm going to put this public so that you all can see it and I don't need to add a readme file or anything like that that I can just leave all of the rest empty because I already have a whole bunch of code and stuff to push up to it so it creates that repository and then it shows me hey if you want to create a brand new repository on the on the command line here's what you can do but you can also push an existing repository from the command line so that's what we want to do so go ahead and copy that code and go to your terminal I'm going to stop my server and I'm going to paste that code in and yes I'm going to paste it anyway we live dangerously here not actually it's completely safe but I'm going to reload and in that repository for glisten AI we just pushed all of our code it's going to have this default read me here of prismic and next JS Min typescript starter but you can go ahead and edit that as you please right now I'm not too worried about it but now that our code is live on GitHub versell now can have access to it once again if you don't have a versell account go ahead ahead and click sign up and it said for.com you get a free account once you have your account go ahead and log in we going to click add new project and if you don't already have a connection to your GitHub it will show you a little menu here to connect that up it's nice and easy pretty seamless uh once you are connected go ahead and find your glisten Ai and click import because versel makes nextjs it's going to be really easy for them to deploy nextjs it's just going to be pretty much just a couple more clicks don't need to change anything here no environment variables that we need go ahead and click deploy all right it's going to take about a minute and then we will check back in all right our site has been deployed now we can continue to the dashboard and you see here uh this is the specific deployment of my last commit but we also have this specific domain glisten AI for sell. apppp you will have a different domain because that is now taken so that's fine but we see here it is live on the internet you can go here and visit it and yeah this is our site those are all the images this is all the code that we've built let's see if our case studies work there they are and that loaded so fast oh that's so great uh we can go back to the homepage and it's it's Zippy folks it is really Zippy once you deploy it it uh it gets so Speedy cool features we can build that page out eventually but uh I'm not too worried about it in the prameters of this course great it's looking really good now we have a couple more things to set up what versel did to deploy this site is it followed our code and it queried prismic for all of this text and these images and everything else and then it cached those queries now if we change anything back in prismic So if I come here and say with super intelligence and I hit save and I hit publish I can refresh this until the cow's come home but it's not going to change from being Dynamic intelligence because versel doesn't know that we need to bust that cash so we need a way from prismic of telling it hey I've changed something please bust the cash request that data again and update what needs to be updated luckily for us the starter that we started with comes with a revalidate route um as well as a preview and an exit preview route but let's focus on the revalidate for now uh it's a really simple thing here but as we hit the SL API SL revalidate route we will then bust the prismic revalidate tag so that tells for sale anything that's tagged with prismic and down here in our prismic io. TS every single query we put through is tagged with prismic this is once again handled for us but I want to make sure you understand it um anything that's tagged with prismic gets busted and it gets retched and it will be updated so let's go ahead and make it so that anytime someone publishes something on prismic we go through and we oh I got logged out one sec I'm going to try it again all right so let's make sure I'll try one more time all right so now we're going to go through and make sure that anytime someone publishes something on prismic it will revalidate on verell these are breaking because we don't have our server up and running but actually we we will point it towards our live page in just a few minutes first let's uh oh sorry I'm I'm just going quick so down here in settings we we we want to go back to the document list and then click settings and then we want web hooks here and we don't have any web hook so it's encouraging us to create a web hook as you can see the URL is going to be your domain /your hook URL so go to your live site not not this one but you know that is my live site and grab your url it should be something. forell doapp and then you're going to add API revalidate and yes this is the name field but I like to have both the URL and the name so that you know this is very clear what this is doing so URL should be your app URL API revalidate just like that and you don't need a secret don't worry about that and we're going to just remove the other options here so that it's only triggered when a document is published or unpublished we're going to add that web hook that should be set up it's pending because we haven't fired it yet let's go to our homepage I'm going to change super to awesome to test this let's hit save let's hit publish and let's head to our homepage let's hit refresh let's try that one more time there we go I just needed to refresh it twice within a few seconds it was uh a the cache was busted and we now have awesome intelligence so we verified that that now works anytime you want to change something here oh and and by the way like that took a couple of seconds we we had to refresh it twice but that's how quickly you can update your site um we can drag the hero underneath the Bento hit save and publish and let's see how many how many times I need to refresh to get that to work once that was immediate I didn't edit anything there that was uh exactly what what you saw so let's drag that hero back up I just want to show you how quick this is um in the past you would need to rebuild your entire site but with the new app router it is really that fast so I'm going to change this back to Dynamic intelligence just because that's that's the copy we we wrote and we publish that and it should return to normal awesome so let's do a couple other quality of life things inside of prismic so right now we don't have any previews they're all they're all Breaking because Local Host 3000 is not running so once again grab your url your live URL head to these three dots and grab live preview settings swap out the Local Host 3000 for or glisten a.y. apppp or whatever you know like your version of this go ahead and hit save and now these should work and these will work whether or not your Local Host is running that one's just going to be a little bit long I think the glow is pushing that one down not positive though now if we want to preview the page we click here but preview not enabled well we need to do the same thing we need to head back to our homepage and then head to settings and we see that we have previews right here so I still have on my clipboard my domain I have glisten Ai verell doapp and it shows you I I I I think I need to get rid of the forward slash there and then it asks for the preview route SL preview is not what we want we actually want slash API preview so go ahead uh API preview just like that create my preview oh and I forgot to name it so this is yes this is production and I can even create a development um version and that can be at Local Host 3000 so if if you wanted to preview it locally that would work just fine and I'll say the same thing API preview just in case you want those two previews set up now I can go back to documents I can open let's open yeah stick with the home page I I was going to get fancy but why bother um let's change shine to Shimmer and instead of hitting save and unpublish um I will actually I think I do need to save but I'm not going to hit publish but I'm going to preview the page and I'm going to choose production so now it's going to open a version of the live site and it'll say Shimmer instead but have this little homepage link down here and I can even have a sharable link that I can send to a friend just making sure that you you can indeed see this so I am previewing this and I can prove that to myself and to others if I open an incognito window and paste that in it still says shine on the live site but I have a little cookie that's added here for for this preview that says hey actually you don't want like the published stuff you want kind of like this offshoot Branch this this preview version of the site so it kind of spins up a Dev server kind of instance and request the data from a different instance of our prismic repository so this is a great feature for Content teams for anyone who wants to make sure that their work is perfect before they hit publish and everyone sees it I am going to close out of this now and it should change right back to shine so really really cool feature and it was so simple for us to set up because it's already built into to the uh to the starter that we launched with even if it wasn't you can copy this from the docs at prismic this is not a whole lot of code and then that that that X we hit there uh just did this really a lot of the magic is coming from the exit preview and well the you know create preview or whatever whatever's going on uh for from nextjs so it's very very handy but uh it's that simple to set up folks so I'm going to say shine save and publish so now we have a live site let's animate it because it's live but it's boring so next up we are doing Gap animations let's get to it all right as promised now that the site is deployed we are going to be working on these animations that really set your site apart from other sites that might look the same but don't have this professional animated feel so as promised we're getting into it we are going to start by installing Gap Gap is a wonderful animation platform that we it just uses JavaScript to animate anything and we could spend an entire course just talking about Gap but uh we're going to go to the docs if you don't have those you can go ahead into our notion Doc and click gsap docs or just search for that we're going to head to installation and really it's as easy as npm install Gap but we also want to use react with it so if you had to learning and there's a whole react page so if you run into any trouble with using Gap and react you can head to this wonderful page with all these docs there a whole bunch here they even have starter templates all this kind of stuff there there there is a wealth of information on gsap uh it's been around for years and years and years it's I can't recommend it enough and even the site is so cool look at that so uh let's head to installation we're going to grab npm install Gap head to your terminal run that command just like that and we're also going to install the react package so once that installs go ahead npm install and do at Gap SL react I'm sure it says that in the actual react docs I just know that by Heart by now so use gsap hook um yeah so you're importing use gsap from at Gap react regular Gap doesn't have the at but this package does once that's installed go ahead and start up your Dev server once again let's go npm run Dev and get that running again let's head to our code and we want to start in our hero slice I'm going to minimize everything and open these up again let's get into this hero now I talked about this briefly when we went through the Navar but this hero right now as it is defaults to being a react server component so if we try to run any JavaScript on it it's not going to work at least on the client side because it's not shipping any of the JavaScript that it's running so what we need to do is we need to create another component that this passes the slice props to and that component itself will actually be a client component and run our Gap client side so we're going to go ahead and create a new component in here called animated content. TSX like that type RFC and we have have a react functional component at the very top we need to write in quotes use client so now nextjs and and reactor will know that this is a client component and we can go ahead and grab everything inside bounded from relative all the way down we're going to uh I'm going to cut that and we're going to just call animated content just like that and we can self CLI close that we'll pass it props in a minute but I'm going to come over here get rid of this div create some parentheses and paste everything inside and it's going whoa I don't know any of this stuff I'm going to go back to index and we're going to pretty much import yeah everything just about so I'm going to grab all of this except for bounded and I'm going to bring that over to animated content we can erase react I'm pretty sure and then paste all of our Imports in we're not using content just yet but we will so go ahead and keep that there all right and we're going to just pass the slice straight through can't see anything there we go slice equals slice and then over in our animated content we need to uh get the slice destructure it off of our props and then we're going to type that so after the curly brackets we going to say slice content. hero slice so now we know what this is going to be now if you go ahead and save this it shouldn't look any different on our website so let's come back here reload this I'll take a little second it's the first time it's loaded since we restarted our server it's compiling SL page and there we go it looks exactly the same now the only thing is we have a client component so now we can start using some JavaScript in here if if we check out the Gap react docks we see that we have this use Gap hook and we can read through here and it basically just says that we have this hook that Gap has made for us that solves a few react specific friction points so we can focus on the fun stuff the tldr here is that you have to use use effect or layout effect and you need to clean up everything once the component detaches from the Dom and it's just a whole bunch of stuff that we don't really care about it's just but it but if we don't take care of it then our app can get bloated it can uh have memory leaks all kinds of stuff that we don't want to worry about use Gap contains all of that stuff and we just get to make fun animations so first what we're going to do in our code is we're not even going to import Gap just yet we're going to say const container is equal to use ref and we're going to say null and what we're going to do is attach that container ref right here we're going to say ref is equal to container container and this allows us to scope everything we're doing to whatever's happening within this div so it just gives our used gsap hook a nice bit of scope to work within now we can go ahead and import Gap from Gap as well as Import in Brackets use Gap from at G Gap SL react like that now first thing we have to do is we need to tell Gap that we're using the use gsap plugin this isn't 100% necessary but it can help us avoid some bugs so gap. register plugin oh and we're going to say use Gap just like that and then we're going to go ahead and call use Gap use Gap app and inside that it takes first a function and then an object so we're going to pass it an arrow function and then afterwards we can give it an object and this object is what's going to actually get that scope of the container so say scope and see it's typed so in case you're confused or you forget what it is uh and then say container just like that to say hey only only affect things in the container now the great part about that is now we can use classes you could set up a whole bunch of refs for each element that we're going to animate cuz remember we want to animate one two three four and then the glow is five five different things we could do five refs to be really specific but thanks to scope uh on the container we can now add classes to each of these things and just use Gap to manipulate these classes so that's what we're going to do on the H1 I'm going to go here and I'm going to say hero and I'm going do underscore underscore heading it's just a little bit of like old school bem naming to to help give this something that I I can Target with gap I'm going to do the same thing here I'm going to go heroor uncore body just like that and as you save it should stay at the front because Tailwind that prettier Tailwind thing on this button link I'm going to go heroor button and then down here on the glass container container I'm going to go heroor image and then on this this bit of glow here just on that single div we're going to say heroor glow just like that so now we have our five classes added it shouldn't change the look of it at all because those classes don't really do anything on their own but now we have something to Target so let's go ahead and open up this Arrow function that we have inside our used Gap function and we are going to say const TL equals gap. timeline and we can leave it just like that for now uh what we did is we just created a timeline instance that we can now add tween to so bear with me let's get some code on on the page and then we can talk about what each one's doing so we're going to call this timeline TL for the timeline that we just created I'm going to say from to like that and and the first argument we need to pass is what we are targeting so we are targeting that hero heading class so do hero in quotes heading just like that hit a comma and we're going to pass it to objects first from and then to so where we're starting from and then what we want to animate to so for the heading if you notice on the Liv site we start kind of shrunk and and it and it grows out like that also comes in with the uh with the opacity so we want to start with a scale of 0.5 and then here in the two we want to say scale one and if we just do that we should see a change so let's go ahead there we go so you see how it it like it animates in kind of funky so that it it stays at scale one and then it shrinks and it and it grows in it's a little bit funky and there's a reason for that because right now the JavaScript is loading in after so first it's coming in as static HTML and it's visible and it's there and then the JavaScript kicks in and it goes hey you need to be at scale .5 and so it makes it that and then it scales it back up so it's a little bit weird right what we need to do is we need to hide everything and then bring that back with JavaScript so let's go ahead and for each of these uh elements we're going to add opacity zero to it so opacity zero just like that I'm just going to copy and paste that to my other elements uh hero button yep going to paste that there and I'm going to put that on both of these both the hero glow and the hero image going to save and we should go back and only we should see the hero on reload oh wait no no sorry we we shouldn't see anything because we are not affecting the opacity yet with our animation so we're only affecting scale so yeah it is scaling up somewhere but it's uh it's not actually doing anything that we can see so not only do we want to affect the scale in our two but we want to affect the opacity change that to one so add opacity one um this object takes pretty much anything like any property that you can kind of think of um in CSS and then some so you can animate lots and lots of stuff uh so luckily it's typed and you can see everything in here that you might want to play with there we go so looking really good right that's it's happening a little bit fast we will change the duration as a default it's set to one and it's also not the ease that we're looking for but just getting it on on the page for now it's it's looking good so let's uh copy this a couple more times uh I think we have five in total so we have our hero headed body button image and glow so I'm going to say body and then uh this is button image and glow now what do you expect to happen here like do you think they're all going to fire at once just think about it in in your head what do you think is going to be the outcome let's see okay so they happen one after another now the reason for that is because of this timeline the timeline has it so that we first put this on the timeline and then once this animation is complete then we move on to this one once this is complete then we move on to this one and this gives you a lot of control and we can even shift where things happen on on the timeline like if we want this to happen a second before it would it it normally would we can do that and we will later uh but this timeline gives us a lot of control if we wanted everything to run at the same time we could ignore the timeline if I just do gap on all of these and they are not on on one timeline they all come in at the exact same time just like that so that's why we're using the timeline because this gives us a lot of fine-tune control over uh when things come in and the order in which they come in so if we want the button for instance to take a while coming in's say duration uh 4 right um the image isn't going to come in too soon it's going to wait for the button to slowly come in give it its time and then the image and the glow come in so just kind of showing you how why we're using this timeline and we're going to get into some really cool stuff with this so let's work on not only the easing which is the way something animates in but also the timing on this because timing is everything with animation so we're going to go into the timeline and we're going to pass it an object we're going to say default and this object is going to take an ease and we're going to say power two in out now gsap has a bunch of great eases and if you need to see uh what each ease does head to the ease actually I think yeah the ease visualizer so here it is um you can also just search for Gap eases and something like this should come up let me get rid of this highlight thing it's completely erasing the word ease there but you can see what each of these eases does like if you think about this ball as your animation um see how it's like a little jarring there um this one allows you to go a little bit further and then come back so you can tweak a lot of stuff here just just just want to point this out to you I'm I'm going to kind of tell you what to type from here on out but if you want to change it at all if you don't like the choices that I made go ahead and pick whatever you want the E ease visualizer will tell you exactly what to put into Gap and how to do that so we're using power two in out that is this one so it gives you a nice like Smooth in and a smooth finish right so it it's gradual in and grad out and we're making that our default we could always override that per item but for now uh I don't think we override that anywhere on this animation they they all share the same kind of needs now um in this two object in in in the second object for the hero heading we're going to go ahead and say duration one 1.4 and save that and then let's check that out over here let's see what what difference we're seeing that's pretty nice you see how that came in like faster oh we got to get rid of that duration um but yeah they're they're like really shooting in and then slowing down at the end um but the ease in out makes it slow at the beginning slow at the end and we like that all right next for the hero body I'm going to close this we have a little more room we want to add a duration of of 1.2 and that's going to be seconds and then right after the object we're going to add something called a position parameter and that basically says um well that allows us to change when in the timeline we want this animation to fire so we're going to put it in quotes and we're going to say minus equal 0.6 so this is going to subtract 0.6 seconds from the point that this would normally finish which is or sorry from the point where this would normally start which is when this finishes and it's so it it's going to kind of skip ahead and start 6 seconds earlier than it normally would so let's see if we can tell that effect so uh it was it it's it's pretty subtle I'm going to get rid of the duration for here let's put that to uh its final result of 1.3 uh we're gonna speed this up a little bit so I'm I'm I'm gonna actually make it happen before this one even start so I I really increased that position parameter see how that came in first now it's kind of like skipping the line if you do plus equals it would go the other direction and start later than it ought to so the button's going to come in at least it should did I break it oh no no no sorry it it happened a second later but the button is still waiting on this to finish so yeah the position parameter is just pretty interesting I'm getting really deep into Gap stuff now so I'm going to kind of move a little bit faster cuz you're probably I don't know maybe you're loving this let me know in the comments if if you want more more more gsap um comment more more more Gap please and I would be happy to just make a full Gap website uh it's this stuff's a lot of fun and we're just scratching the surface so let's keep moving let's make some more progress so uh here I set the duration at 1.3 um and actually we we we need to change a couple of these values so was I was going off the default uh that we copied from hero heading but the hero body we actually don't change the scale on this one we changed the uh position so we want to say y 20 and then instead of scale we need to set y to zero let's see that difference so that one scales in this one slides in because we we affected the Y position uh on the button we actually want a scale of 1.5 so it's going to be a little bit bigger and then it shrinks down to its normal size let's check that out that one grows in this one slides up this one shrinks down and that one's growing in and doing its thing so let's move on to the image um oh except for the hero button we want to also shift when it starts so after the second object we want to put minus equals 0.8 and then for this I'm going to go ahead and just uh space these out a little bit so that this is easier to look at uh for the hero image we want to change it from scale for in initial value to Y 100 because this is also going to slide up and we want to change this to Y is zero and we want this duration to be 1.3 and the position parameter after image is going to be let me just make sure I'm getting this right is going to be negative under sorry plus equals or 0.3 there you go I'll say it again plus equals 0.3 and last but not least let's work on this hero glow the scale and scale is perfect for that so let's just go for the position parameter and that's going to be quotesal 1 go ahead and save all that and let's see how this looks when we animate it in nice so that looked pretty good except this happened a little too fast so go ahead and add a duration to this of 1.8 so the glow is going to kind of jump the line ahead a little bit but it's going to slowly animate in so that's looking really nice and that's what we're expecting for the live site excellent excellent work there all right so one more thing we need to do with our animation here is handle prefers reduced motion we touched on this a little bit when we were working on our navbar if a user in their browser decides that they want reduceed motion we want to respect that and just have this animate in kind of instantly rather than uh do all these fun animations so go to the notion do and you can see here we have Josh kom's use prefers reduced motion hook go ahead and click that and we're going to copy this into our code go ahead and grab the entire thing and copy and then in our project we're going to go in our source folder and create a new folder called hooks just like that and in here you're going to want to create a new file and we're going to call this use prefers reduced motion. JS quite a mouthful but we want to use uh the name of the hook go to the top and we're going to import react react from react just like that I don't think it needs anything else but now in our animated content component at the top here just before we register the plug-in we can go ahead and call const prefers reduce uced motion equals use prefers reduced motion and we might need to export it if it's not already exporting yeah there we go so we need to export default there we go so put an export default before the use prefers reduce motion and now if we try to import that H and my Auto Import isn't picking it up we can go ahead and import prefer or sorry use prefers reduced motion from uh at SL hooks sluse prefers reduce motion and there we go if yours worked great mine didn't this time around so not sure why but that's all good right here at the very top of our used Gap Arrow function that we're returning we want to say if prefers reduced motion so if that returns true we just want to animate our classes in immediately so we're going to say gap. set and this is just a way to instantly without animating instantly change some values with gap set and we're going to put quotes and we're just going to list every one of these uh separated by comma so hero. heading. hero underscore body comma. hero underscore button comma. hero uncore image and heroor glow just like that so now each of these are going to instantly be set to opacity one cool so if they prefer that reduced motion we're not going to animate and we can go ahead and check this right now we don't have prefers reduce Motion Set to reduce but if we open our Dev tools we can hit control or command shift p and we get this cool little run command and we say prefers reduced motion so emulate CSS prefers reduced motion going to turn that to reduce and now if we refresh our page that is ah so we see a flaw in our in our animation reduction there I didn't return it so half of it is setting it so that it's visible but then we didn't return so we need to make sure that we don't go and play all these things so let's try this again if we refresh there we go that's exactly what we want we want to eject out of all these animations but make sure that our content is visible so that's great we can turn that off prefers reduce motion uh do not emulate CSS prefers reduce motion turn that off refresh the page and we get our animations back now the only gotcha here of using this hook in the way that we are is that if the rare circumstance happens where a user while they are on your page toggles that setting and says prefer that that they prefer reduced motion this will not pick up on that and so any animations that continue so for instance like the star Grid in the background that kind of sweeps across will continue until the next page load and then the JavaScript will see that they've changed that setting there is a better way and you can find that here in the notion doc over on the green sock docs or sorry the Gap docs they have this match media uh helper that allows you to not only see if they're saying prefers reduce motion but also if they change it it's it's listening for that change and it will stop or start any animations based on that that's really great and that's probably the absolute best way to handle this but it's also a good amount more code I know that we're already adding uh a lot to our site and I didn't really want to overwhelm you but if you are dealing with a site where that might be a thing where a user could change a setting as they're on the page and you need to handle that uh make sure you read the these docs but for the purposes of building this site and still respecting accessibility we are going to be using this hook that yes this part is listening um for the change but we are responding to it uh in kind of a static way that that once this runs or or doesn't uh it's kind of over it's not going to update at all so just wanted to make you aware of that that match media is the way to listen to changes and update those but for our purposes we are doing a great job and uh there is a little bit of accessibility baked in and we a smooth animation now let's work on the star grid background cuz right now that's kind of like some of the secret sauce that that this one has that the final version has that we are still missing right U oh that's uh here go this is the the true final version there we go we need that so let's do that now so before we open our star grid we can go ahead and grab these three lines right here the GP use gep use prefers reduce motion CU we're going to go to our star grid and kind of do the same thing head over to Star grid. TSX at the top I'm going to do it very first thing I'm going to say use client CU remember any anywhere you're using Gap you need to make sure you are uh making that a client component and then we're going to import those three things and actually we need one more we we could have grabbed all four right there I go ahead and grab use ref because we also want to scope it just to the star grid and back to animated content we can go ahead and grab these three right here the container that prefers reduce motion and GAP register plug-in and we are going to paste those right before your grid um this is just what uh if if you want to change the number of rows and everything in your grid you can go ahead and change those numbers it looks good as it is though so we're not going to touch it and then go ahead after the grid and call use Gap and we're going to pass that an arrow function open that up and then at the end we're going to pass another object with scope that's going to be container but remember we need to add the container ref onto our star grid so we're going to say ref is equal to container just like that all right so first we're going to turn off the opacity directly on the star grid so we can animate it in opacity is equal to zero just like that and then inside our use Gap call we are going to call a gap. set and we're going to specify the star grid item and that's going to be each of the little stars that we see in the grid and on those we are going to say opacity zero to start with transform origin that's just going to be which part of the actual shape are be transforming from so like if you were to spin it um where would that axis be we're going to say Center in quotes and color is set to uh hash FFF we're going to set it to White you can also just type white but let's use hex codes for this one next we're going to say gap. set and we're going to do container oh no sorry not in quotes container. current so we're using that ref and we're going to set the opacity to one so basically as this SVG renders in it's going to be hidden and then we're going to use uh Gap to hide the items inside it and we're doing it in that order because we want to First have these rendered out and then we are going to with gap uh bring the container back but the items will still be hidden so if we go ahead and save that we should not see anything on our homepage and that's exactly what we get uh the container showing each item is hidden so now we can add our animations let's go ahead first and make a timeline so const TL equal to gap. timeline call that as a function and then let's put a little comment here and say entrance animation because we're going to need two animations here they're going to be very very similar but if I show you on the final version we have one animation that has everything enter in and then it's going to stick around for a little bit and then after about 8 seconds I think it's set to uh we have a second animation and this second one loops and loops and Loops um and it's just different from the entrance animation in only the only a small technical way so without getting too nitty-gritty into this um just kind of take my word for it that we we need to do this in an entrance and a loop animation so first for the entrance animation we are going to go ahead and say TL do2 and we're going to say period star grid item just like that and we're going to pass that in object now we're going to be using something that not a lot of people use with gsap but is really really powerful um especially for these kinds of key frame animations we're going to pass a key frames array so say key frames and we're going to pass that an array and each object that we pass to this array is what we're going to be looping through so it's it's it can be handy rather than doing a bunch of timeline. tws to just have a key frames array inside of what's called a tween so for key frames our first key frame is going to be an object here and we're going to say opacity zero zero autocomplete got ahead of me a little bit and duration zero so we just want to make make sure that for our first key frame we are animating in from opacity zero but it's kind of an immediate thing that doesn't hold us up at all second object we are going to say opacity is 0.4 ignore the opacity L part uh rotate is going to be plus equals 180 so this is a relative um change based on where it currently is so we're not setting it to 180° we're saying whatever it is right now add 180° to it uh then we're going to say color is equal to # FF d0 57 and that's one of the colors uh I believe it's the color in our little AI uh logo going to say scale three that's what makes it big as it animates in duration uh is going to be 0.6 that's for seconds and now before we uh do the next part let's just see if we see any change there so let's check our homepage out let's refresh this and there we go we see it scale up it starts at nothing and it scales up and spins in okay not bad but we want that cool effect where it starts in the center and it goes out and what we're going to be doing for that is using the Stagger features that gsap gives us this is so much trickier without gsap trust me I tried this with frame or motion it was was really tough for me to kind of like like I had to do it mathematically and it it worked but it didn't come out this nice and this is just a built-in um feature with gap and you get like this built-in easing where it it just it works so well so really it's it's a great great great feature that uh Gap provides us and it's a simple as just adding a stagger property to your tween and passing it a couple things you see we we have the the grid here we tell it how many rows and how many columns we have in our grid where we want to animate it from um this is a great little playground feel free to change yours so if you want it to animate in from the edges like this go for it that's totally on you if if you want it to uh be completely like so for null it's going to animate in from the center star but if you choose X it's going to animate in from the entire column y it's going to animate in row by row there's lots of different things you can do here you can even animate it randomly so feel free to play around with the different feature or or the different settings that we have uh for us we're going to just stick to the way that I designed it and we are going to add a stagger property here we're going to say amount is two we're going to say grid is grid and that is referring to uh this right here so that's the rows and columns and we're GNA say from center now the amount if we H hover over this it doesn't say I thought it would um but the amount is the total amount of time in seconds that get split among all of the staggers so if it's one and there's 100 elements that stagger linearly there would be 0.1 seconds between each one so the amount is just the amount of time that the entire animation takes change this if you want to change the duration of the whole animation if you want to change just one or sorry uh each items time that is the each property so totally up to you we are using the amount property here now if we save this and check out our animation again we should see there it is ripples in from the center and it stays because we don't have anything else we don't tell them to do anything else but so far pretty cool now let's make it so that it shrinks down to what we are what we currently have it as that smaller grid so we can actually I think go ahead and copy this and paste this here and we can just tweak some of these values so we're going to drop the opacity down to 0.2 uh we're going to make the scale one I guess I can keep it in the same order uh the color is going to be white again uh the rotation can stay it's going to rotate again and we're going to add a delay of -2 and what this does is it makes it start sooner than it should so it's kind of like the position parameter from before uh so that it it doesn't have a delay it actually goes a little bit faster if if we get rid of this we will be able to see um and going to change the amount I'm going to show you that it's going to wait until the entire first animation happens and then the second one's going to come through and that's just not nearly as good so if you have the delay -2 here's what we get instead we get this like immediate follow see how it's like immediately following so it's kind of like one after another just a much cooler animation in my opinion uh yeah we it kind of has like the a ripple effect rather than um I don't know I don't know what to call the other one but I don't like it as much so that is our entrance animation you did it that's it it's as simple as that with uh stagger and with GD like it's it we don't have to do any of that tough math it's just handled for us now let's do the looping animation I'm going to go ahead and I'm going to copy the entrance animation the entire thing and I'm going to bring it into the loop animation myself lots of space so I don't mix these up going to paste it into the loop animation and there's a few changes I need to make to the loop animation version of it first off we can get rid of that beginning cuz we don't actually uh want to animate in anymore we just want to have this wave thing happen again so that will be our first key frame and then inside the object so we want have a couple more settings here we're going to have a delay so that it doesn't happen right after the previous one going to have a delay of 8 seconds repeat is going to be set to ne1 which means just repeat forever that's uh basically the short hand for Infinity uh repeat delay is going to be 8 seconds and like I said you can change this as you want if you want lots of these to happen over and over again real fast uh you can make that a much shorter number i' recommend against it you don't want it to be too distracting just a kind of like fun thing that happens occasionally and beyond that the rest is good to go you don't have to change anything else because we want these to be the same as they were on the on the uh beginning you can tweak them if you want but I'm keeping them the same I'm saving this and now I'm going to reload we should see our animation play to start and it does this that nice sweeping out I'll tell you a story for 8 seconds uh I don't I can't think of anything I'm really sorry oh man terrible story and there we go was saved by the animation so that is looking exactly how we want it and the cool thing is because we put that star grid over in our case studies we should also say it it's it's currently building that page remember that's not going to be as bad when uh it's it's deployed because this page will already be built but yeah we saw that nice sweep in of the star grid so looking great well done we have a nice nice hero that's going to uh attract a lot of attention impress a lot of people great job let's finish that one there and next up we're going to work on this cool little animation oh I'm I'm scrolling here like it's going to do anything we're going to work on this one because this is the final project where it ducks behind and this is going to be much simpler than you might think thankfully Gap has a great plugin that's going to make this just a few lines of code ah but before we go before we hop into that let's actually hit our star grid to add some accessibility we did this prefers reduce motion but I'm not doing anything with it so let's fix my uh incorrect uh well I I I just forgot about it to be honest but here we go if parenthesis prefers reduce motion I think I have it on my clipboard there we go uh we're going to say gsap set container current I think I have it right here yeah I'm going to copy paste that and then we're also going to say uh gsap set star grid item uh to opacity one no sorry to opacity 0 2 we're going to say uh scale one we're going to get rid of the transform Arin we don't really need it uh color I don't think we need that either but we can check and then we need to just return just like that and let's see how that looks let's check it we're we're not going to do this every single time but I just want to make sure that uh in fact we don't need the things like the color so reduce there we go going to reload and we shouldn't see it sweep across it should just be there perfect it's exactly what we expect nice not uh not jarring kind of website it looks good so we're going to turn that off and let's get into our scroll triggered animation now all right so we're going to be adding an animation to our showcase slice and all we need to do really for this one is just worry about this heading the Showcase slice has this heading where here we go your glisten your workflow and we only need to animate that part we don't need to uh turn this entire component into a client component just need a little bit of animation on this heading so what we're going to do is we're going to create a client component that takes children and we're going to wrap this one bit of text in that component so inside your showcase go ahead and make another animated content. TSX say RFC hit Tab and now we have this animated content component here so we want to destructure children off of the props here cuz we're going to be passing those through and we need to type that so hit colon and then open another uh object and say children and this going to be typed as a react. react node just like that all right so in here we can come inside the div and just return children like that hit save and back in our uh showcase we can wrap this prismic Rich text with animated content so animated Ed content we want to make sure we do it from the local one not the hero so animated content and we're going to wrap prismic Rich text with that that should be good right there cool if we hit save we should see no difference on our homepage cuz it's returning children that's perfect now if we go into animated content here we want to just put use client at the top and from our first animated content just make sure you're looking at Showcase and hero um I'm just using this to speed us up a little bit I highly recommend always copying and pasting whenever you can grab from use ref all the way down to use prefers reduced motion and paste that in here we're also going to be using one more thing from Gap we'll grab that in just a second you can go ahead and also grab these three from right there and paste those oh no sorry not in there inside the uh function I'm must put it inside the types great and now we also need to import one more thing let's try to Auto Import it here so scroll trigger just like that and we want to import that from Gap SL scroll trigger so you should have import scroll trigger from Gap SL scroll trigger save that and now on this div go ahead and put ref we want to just say container and now now we can use that for our scoping of our animations go ahead and use Gap pass your arrow function and scope that object and we're going to say container great now before we were animating classes a whole bunch but because this is actually the div that we want to be animating we can just use that and pass that to Gap we're going to pass uh head the container. so gap. from 2 so we're going to be animating both the beginning and the end of this animation we're going to say container. current that's what you're animating and I'm passing it these two objects and in the first one we're going to say Y is 100 and that's going to push this element down by 100 units and then in the second one where we want to animate two we want to say y is0 it's just going to go back to the default of where it expects to be and we're going to set the ease and that's going to be in quotes power two and we have nice little uh finish right here say in out like the love autocomplete we have duration that's going to be set to one you that's the default so it doesn't really need to be there but it's just nice to be explicit whenever possible now here's where the magic comes in because right now if I were to save it and I did um we would see that on reload it just kind of triggers in like that right so it just plays no matter what scrolling doesn't change anything about it so we want this to respond to my scrolling so after duration we want to say scroll trigger like that and pass that in object I'm going to say trigger is container. current and then I'm going to say and and this is actually what is um making it animate or I I'll I'll show you in just a sec with a handy little feature that scroll trigger has I'm going to say start is top and then space bottom minus equal 40% and this basically starts the animation when the top of the element hits the bottom of the viewport minus 40% so that's what that stands for the top of the element hitting the bottom of the viewport minus 40% % we we'll we'll we'll see how that looks and then um toggle actions this gets a little bit fancy toggle actions we're going to say play pause resume reverse now we can check out the scroll trigger docs in just a second uh but we're going to just first make sure that this is working so that worked as we expected but as we go back to about 40% we see that it slides back down sorry I accident clicked let's try that again it's hidden it's hidden it's hidden and then we hit about 40% of the of the window and there it is if we get rid of that 40% it's just going to animate in pretty much as we come over it um so like as like you might not even be able to see it unless you're fast so I had to like scroll quick because as soon as you get there it's going to start popping out so that's why we we want that 40% we want our viewers to notice this cool little an that we have and I have to reload the page for it to kick in again there we go um we could change it so that um like there's an opacity zero and we animate that in if this was above the fold if we ever expected this to be visible on screen when people came into the site um then we would want to make sure that like our hero uh the the starting state of it was different um but because javascript's going to kick in by the time someone Scrolls here it's going to have all already moved so I'm not too worried about it so it kind of seems like magic right now so let's go ahead and add markers true and this is something you don't want to ship to production with that being true I've done it before it's not impressive to clients because it adds these helpful little debug tools over on the side so you can see it's not like a a guessing game or magic anymore you can see exactly where that gets triggered and if you if you had a whole animation that you wanted to Tween through um that would be where it ends and you can even have it reset after it ends you can do all kinds of things but now you can see exactly when that's going to happen and that that markers feature could be a real Lifesaver if you're trying to debug a scroll trigger issue now toggle actions let's quickly uh let me see where are the docks over here scroll trigger here they are so scroll trigger toggle actions here we go so on enter on leave on enter back and on leave back so this is when you you first enter and then when you leave so when you scroll past that that would be leave and then on enter back and on leave back that's like when you come back into the zone so we have those set to play so once you enter it play once you leave it we don't want you to change it once you come back when when you enter again we we want you to play it again and reverse it when you when you need to so that's why we have those settings there uh once again I could spend all day on on these animation kinds of things gsap is a really robust animation platform but with just a few lines of code we have a really slick little animation that's going to impress some people and last but not least we want to make sure that if they prefer reduce motion we're not going to impress them with motion because that's not going to be impressive they'll be more pressed if we respect their preferences so if prefers reduced motion we are just going to say gap. set heading ref or sorry not container to current or container current y zero and really we probably don't even need that because that's already the default but um just being explicit about it just setting it is probably the way to go there so save that and uh oh get rid of markers don't do what I've done before that's a little silly getting a DM saying hey I think you left your markers on don't don't don't be that guy cuz I'm already that guy all right folks I've saved the most fancy part of the animations for last we are going to be diving into this cool little timeline now so this is going to pulse it's going to get brighter it's going to increase opacity then we're going to have that line go out that gets uh brighter or or increases opacity then that line and it just ripples out from the center and it fades out and it repeats and it's a nice little like metaphor for integration into glisten AI so let's get into it we have our component over here uh that's just nice and static right now but we want to open that up in Visual Studio code so head to your Integrations folder open up index. TSX and we're going to create a new file alongside it we're going to call it animated content . TSX this is just the pattern that I've been following you can do whatever you'd like but I'm going to go uh use client and then inside that an RFC and create that just like that so animated content we are going to go ahead and grab everything that is past the slice primary body so we see this div here the one that starts with mt20 go ahead and grab this entire thing and we're going to cut it and and we're in its place we're going to say animated content and do the one that is local I'm going to close that up and save and then I'm going to paste this in over here we're going to get yelled at a bunch because it's going to say whoa I don't know what any of this stuff is that's all right we need to make sure that it gets the data it needs so first we're going to handle the props that it gets so we're going to say slice just like the other ones and we're going to grab slice or sorry we're going to type slice and we're going to type it as content like that from prismic client do integration slice just like that then what we can do for a nice little shortcut is open up the animated content slice from our hero and grab the last few Imports and bring those over to our Integrations animated content slice go ahead and drop those there and we can also steal these lines of code because once again we are pretty much copying this same sort of pattern and then once you have that we're going to go ahead and import a few of these things like stylize logo Mark going to import it there uh icons we will take care of in just a second we'll we'll copy and paste that over clsx we will import that and that looks pretty good go ahead to your index your uh Integrations index and we need to grab icons and we'll also need to grab their Imports as well um but first i'm going to paste that there it's going to say we don't know any any of that is and grab these from font awesome icons paste that in there and I think that's pretty much everything for our animated content that's looking good now we just need to pass in slice cuz animated uh this is yelling at us saying hey this is expecting slice so go ahead say slice is equal to slice great now we should see uh a working Integrations thing we should see no change whatsoever and that's what we're expecting so now that we have animated content we have it as a used client we have our uh Gap imported let's go ahead and open up right here use Gap call that and then pass that an arrow function as well as a scope or sorry an object with scope and that's going to be container we don't have anything uh referencing that yet or or or that's not a ref that we have put on anything yet so we'll say ref on the parent element I'm going to say container just like that we're looking good so go ahead and open up your used Gap function and we are going to say const TL equals gap. timeline and call that and pass it an object the this is the properties for this specific timeline we want this timeline to repeat so we want to say repeat1 and the defaults for this timeline we want to pass an ease of power 2. inout great so we have three things that we want to animate with this timeline first you have our stylized logo Mark which is that logo in the center here that already has a class on it if you copied it from the notion doc of pulsing logo so we're going to animate that as pulsing logo then we also want to animate each icon as pulsing icon and the signal line as well signal line so we have those three classes there that are going to act as our targets for our timeline so go ahead and say TL for timeline. two and we're going to Target that puling hyphen logo first and we're going to open that object and say key frames like that and we're going to pass that an array and inside that array we're going to have an object for our first key frame we're going to say filter brightness in quotes brightness 2 just like that and it's cool this handles CSS filter so we can pass pretty much any we want on that just so you know for future Gap animations you might want to make then we're going to say opacity is one duration 0 .4 and ease is power 2 in just like that next object we want to then dim it so this brightens it up and it juices the opacity up to well full and then we want to dim it back down to uh where it is currently basically so we can go ahead and copy uh these three and say filter brightness one opacity is going to come down to 7 and the duration is going to be a little bit slower it's going to kind of like Fade Out a little softer so let's see how that looks and we should if you refresh should see a little flashing like this looking good all right that's what we're expecting so now that that's happening we want to animate next in this timeline so we want to add another to this TL so TL do2 and we're going to pass it now the signal line and that's going to get an object inside there we're going to say key frames going to pass that an array and we're going to to be animating the gradient that is uh on this signal line so let's check out the CSS real quick you don't have to open up this file but I just want to kind of show you what we are changing here so if we set this height to instead maybe let's go like 30 pixels we should see it a little bit bigger and when we animate that we can really see the gradient that we are going to be animating here so for key frames we want to start out background position it's going to start at quotes 0% 0% and then close that object next object so the next key frame we're going to be using is going to be background position and this one is going to be instead 100% 100% so we're going to animate the entire thing through but we are not done with this object go ahead and add a stagger to this add an object and say from Center each it's going to be 0.3 just like that and this is going to have a duration oh in yeah a duration of one so it's going to be inside that second key frame there so if we save that uh we will see that the timing isn't great here let's reload so that that takes effect there we go we're seeing that big gradient so that is happening because signal line let's go to globals signal line has this background image where at 50% we have both transparency so that basically from 0 to 50 it's transparent then immediately at 50 it starts with this solid color and then it fades out until 70% to be this uh to be transparent again so that's why there's like a hard line and then a nice smooth fade like that now if we change this back to 1.5 pixels we'll see that it just looks like I don't know or of a signal right that's what I called it that but that's the trick we are just changing the position of the background image so it starts completely at zero and then we move to 100 and it looks like it's traveling along this line now the only thing is it's not starting at the right time so uh at the end of the object here after the array we need to add a position parameter oh no I'm sorry it's going to be after the um after the close of the object you're passing so for me it's after this purple curly bracket we're going to pass it the position parameter so quotes negative equals 1.4 and that just happens to be the amount of time where it looked really good for this to pulse and then for that line to shoot out see I kind of want to make it feel like that lights up and it sends out a signal so that's looking pretty good now we just need to work in our last bit the pulsing icon so TL do2 pulsing icon like that going to pass that an option uh yeah a an object and while I'm here I'm going to go ahead and say minus equals 2 for the position parameter so I don't get confused for where that needs to go great open up that object and we are going to say key frames like that going to pass that an array and we're going to pass that to objects so first one we going to say opacity is one going to make it fully uh opaque going to say stagger pass out an object and say from Center each 0.3 and then outside that object we're going to say duration of one after the first key frame we're going to make that second object the second key frame and say opacity 0.4 duration one and I'm going to copy this stagger because it's going to going to be the same the only thing that really changed is that the opacity Fades back down so let's see how that looks all at once pulses that lights up that lights up that lights up very cool now the thing that might be kind of throwing you here is how why are we doing a stagger right so if we don't have this stagger going from the center this is what it looks like I'm I'm going to comment that out and reload everything Fires at once right all the lines go at once because it's just oh I they don't know any better right so this makes it so that it starts in the middle and it goes out out out we just using that stagger parameter to our advantage to make a pretty nice looking little timeline here so it seems complex and and to be honest it was a little complex to figure out but once you get the hang of it uh it's not so bad right now a couple things I want to to mention uh you might be wondering why do you have this rotate 180 here that's so that the gradient and there it is on mobile um that's so that the gradient knows to flip and go the other way when it's on that side and then on mobile we want to make it so that it actually rotates and goes up so not only do do we have some Styles here in the CSS that change depending on uh which breakpoint you're at but in the desktop version has a rotation of 90 and then on mobile and Below uh we have a rotation of zero so that's what's handling the responsivity and making it work on mobile otherwise this would kind of just get all wonky and out of place so that's looking really good starts in the center moves up just like we would expect great job all right so with that complete we can go ahead and add all of our changes to a commit and we can say add Gap animations I'm going to say commit and then I'm going to sync those changes once you push those up that should kick off a new build in your versel project let's check it out and right here we see building add gsap animations and so that should update our launched deployed page now while that's working let's not waste any time let's do a couple other nice housekeeping things right now I don't really love the icon well I I do because it's a prismic icon but that's not what our custom fancy site deserves we want to drop a nice new icon in here that represents glisten so let's go ahead and do that open up the folder that you downloaded the nice little zip grab this icon and you can drop it in there and it should ask you if you want to replace it and yeah we do so drop that in there and if you hard reload this page oh I didn't even have to do it Nexus just found that icon in the app directory make sure it's there make sure it's in this app directory and it says okay I found a file called icon I'm going to make that your website icon next thing I want to do is really fix up the fact that this just says homepage and the metadata isn't so great if we go into our homepage check out the SEO metadata it's you know just boilerplate generic stuff so go ahead and add a nice new meta title glisten AI the design assistant of the future uh we also want to change this title to say glisten Ai and then back here so jumping around a little bit uh let's say with Clen AI You Save hours of time on wireframes mockups and final designs we're going to replace this cool little car image with our official OG image Glen AI the design assistant of the future uh we don't need alternative text for this because uh it's part of the OG image and but you know what just in case I'm I'm I'm actually going to go in and add it just to this in case we use it somewhere else who knows right it can't hurt and I'm going to add it here too GL AI I'm just going to say what this says there so if I go ahead and save and hit publish we should see a nice new let's see reload it one more time glisten AI there we go we get that title up there and if you're share this with your friend somewhere they will get the much nicer OG image than than those cars that you saw a couple other tweaks if we go into our case studies like Nike right now we don't have any SEO and metadata so right now we just get Local Host 3000 that doesn't look too great right that case stud is not going to impress anybody so we can go ahead and type Nike case study you don't have to do this if you don't want but it it makes your site look a little bit nicer uh we're also going to yep so we have that there we also want to add the Met description uh Nike case study uh from glen. not the best description but it's at least something right we can hit save and we can publish and then we also want to change a bit in our code it would be nice to have a fall back in case we forget to put a meta title there we don't want to just return that uh you know whatever we had a second ago the Local Host thing so let's go ahead and put brackets around this as well as these back ticks and we're going to say either use that meta title or if that doesn't exist we're going to say as text we import that from prismic IO client we're going to give it the page. dat . compan and we're going to add space case study at the end so it'll just say Nike case study if we don't have anything there so right now that should be pulling it from Nike case study but because we didn't put anything in for the prismic case study let's check that one out and see if our fallback works and it does perfect so worst comes to worst you just get a a company case study fallback so that's a nice way to handle um you know letting the content team take control but also not setting them up to fail in case they forget something right it happens to everybody don't don't make them look silly so we're saving that and we can add uh the icon and the page tweaks and say uh update or nice updates to polish site not the best commit message but you know between me and you we're just going to push that up it's just a site where're working on so so after all of that we have a live site mine is at glisteny a.v. apppp you can check it out now and it has these slick animations it's got a nice little favicon there it has an OG image that's going to impress people uh great little scroll animations case studies the whole bag and this cool little integration animation ctas you got everything you need for a fancy linear style website that's really going to wow people in this course you learned nextjs you learned Tailwind you learned typescript you learned Gap you learned prismic you have an entire site built with a CMS with uh previews and a an editor that allows you to see the changes as you make them it is really impressive what you've been able to stick through and accomplish you should really really really be proud pat yourself on the back and uh please send this site to someone and say check out what I made feel free to tweak these images tweak you know anything this site is yours change the colors do whatever the heck you want with it but uh please please please don't keep it to yourself send this around to to people and say I just I just learned how to do all this stuff and point out the cool animations and everything that you did because uh yeah this was no small feat as I'm sure you can tell just by the amount of time you've put into this so put this in your portfolio send this around to employers I I just can't uh can't say enough well done and thank you thank you for sticking with this course thank you for for doing this

Channel: Prismic

Views: 40,082

Keywords: Nextjs14, next js 14 tutorial, next js 14, nextjs tutorial, next js tutorial, app directory, linear website, marketing site, animated website, gsap tutorial, next js app directory, Prismic, Prismic CMS, Creative dev, Prismic nextjs, Prismic Nextjs 14, Tailwind, Tailwind Next js, Typescript, Typescript Next js, Prismic Typescript, Next js Crash Course, Next js tailwind crash course, Prismic Crash Course, Greensock, modern website, dark mode, nextjs project, gsap animation

Id: Cc37uTnbEos

Length: 329min 22sec (19762 seconds)

Published: Fri Mar 15 2024