Build a Responsive Website using React, Gatsby, and GraphQL

what's going on everyone so today i'm going to show you how i created this travel website using react and gatsby so right now you can see here's a little design with a hero background video playing and then when i go ahead and click refresh we actually have some animation so it actually fades up and then typically you know hover right here and then if i were to scroll down you can see we've got little cards and they also animated as i went and scrolled down as well and these are just like typical cards or like images i guess you could say and then i'll scroll down here a little testimonial section notice how it like slid into and also if i go back and redo it you can see it there and also these images are optimized with gatsby so if i were like right click and hit inspect you can see in here in the actual elements tab that this is utilizing gatsby image and also these images up here as well if i were to click here and just click on any of them you can see that they're utilizing gatsby images so it automatically optimizes it already so you have to do that manually and then you can scroll down here we've got just typical like stats uh you know why they would choose this company just typical info section here and then we got another animation with a little input or email signup form here and then also you can just like type in and then uh then actually ask you to put your email address if you hit sign up but i'm going to keep it like this and then we got the little footer section here and then also if i were to change the page for instance so i can click travel now you can see that updates to a new page and then notice that the actual nav bar changed if i go back it's currently transparent click about for instance here's another page you know just i just replaced and i'll refactor everything and you can see here we got like that and then these are all working too and ideally you replace the content here with your own content and even here you can see it like this and then also if i were to school and shrink this is this mobile responsive too so this is a tablet version right here you can see that the image is actually they are wider they span majority width of the screen and then also you can see we got the uh different positioning here and then let me screen gets to the smaller version and we got a little mobile menu and then also these would actually change according to the uh the page that you choose etc and you can see it's like this and then let me just go ahead and inspect this for you so let me just hit inspect and let me just drag this out to max and let's just do like the typical phones here so let's do moto 4g let me drag that down let me try to go to 75 and you can see here that they also fit on even smaller phone screens and this is like the images on the narrow view so you can see it like that and then the animations are still going in and then also you have like that and then i'll just go to like the super and see like iphones typical stuff you guys see there and then let's do the super tiny galaxy fold which is 280 pixels and you can see it still fits and looks clean here so you can see that everything's like that and then it's floating really quick and also i'm recording so it might be a little slow but it looks pretty quick right now so you should be fine and that's what we're going to build for today so if you want to see exactly how i did this then definitely watch this video all the way to the very end and now let's go hop into my vs code editor and let me show you how i created this all right so here i am on my terminal so go ahead and open up your terminal and then cd or navigate to the destination where you plan on creating your project so i already have mine open on the projects folder and if this is your first time creating a gatsby website you're going to have to actually install the gatsby cli so let me navigate over to the actual website and show you what you need to do and if you've already created a website before with gatsby then you already know the drill but just in case let me just show you really quick and also gatsby's docks is very helpful in case you have any issues with your project they have a lot of information and it's very in-depth so right now here i am on this jazzbjs.com and on the quick start section and pretty much what you need to do is just go here and do npm install dash g square gasp cli so let me just go ahead and do it with you i've already done it but might as well show you for this video so let me navigate back to my terminal all right so now here i am on my terminal i'm just gonna command v or paste this in and just press enter and then once this ends up finishing uploading then we can go ahead and move on to the next step all right so now it is completed so once you have yours installed what you can do now is you can either head over to this gatsby starter or default starter template that we're going to be using for this tutorial and they actually have a lot of other templates on their website that you can utilize such as blogs and everything else from there and they actually have like a specific section on their site where you can see all the different types of templates they have but this one comes with a lot of files that we need right off the bat so i have to sit and create them from the start so i'm just on github right now and just call it uh github.com or slash gatsby dash starter dash default and pretty much what you do is simply copy this here but the thing is instead of me copying this i'm just going to copy this actual github link right here and i want to name my product something different but notice is the the way you create a file because in react you do like the typical mpx create react app but for gatsby you just say gatsby new your project name and then the template you plan on using so this one will be the starter one so let me navigate back to the terminal all right so here on my terminal i'm gonna type gatsby new and then let's just call this react and put react dash gatsby travel and let's put v1 here and then after that press space and then command b or paste in this link right here which is the gatsby starter default template and then i'm going to press enter all right so now it has completed so now i'm going to go ahead and cd into this file so whatever you named yours so mine is react gatsby dash travel dash v1 and now i navigated into it and then i'm going to go ahead and before i actually oh i'll start this with you guys to develop i'm going to just do code and dot and this is something with vs code where it automatically opens it up and i have it already set up so if you do like a quick google search on how to set up the code dot on vs code there's plenty of information on how to do that and if you're using a different code editor then i'm not too sure what you do but for me i'm just going to press enter and it's going to automatically open up vs code for me now if you don't have vs code i highly recommend you install it but if you don't then you just have to go ahead and navigate to your code editor and just open up the project in your own code editor and now we have this over here and now you can see that we actually have all these fossils let me just make this let me make this little shrink right here for just one second and let's just do if you do called c command j or also control backtick also works opens up the terminal inside of vs code and then we can do is actually go ahead and type in gatsby develop and then this is actually going to be able to load up the page that we currently have and this is going to showcase the current template that we have installed so once this finishes up i'll go ahead and show you what it looks like all right so the way you open up gatsby links so once you type in gasket develop it'll showcase this localhost 8000 and then also this graphql so if you ever done never seen this before don't worry i'll go into that further down the line but for now i need to do is press command on your keyboard and you can see it shows a two command plus click and then you press click and that pretty much opens up the default startup template so now you can see this is the default template right here you can go like page two back home page and that's basically the startup template right here so we don't really need everything on here but there's a bunch of stuff that is pre made already that saves a lot of time for making from scratch so let me just shrink this down really quick and let me just go ahead and let me close out the terminal here and let's just go through the files right now so the main thing we're going to mess with we're going to go through mainly the gatsby config so you can see here this is all the stuff we have right now and this is pretty much like the think of this is the seo of your site so this is the title you can see here so i want to update this to like let's just say let's just do gatsby travel website i just hit save and normally when you update any gatsby config files you'd have to restart the server essentially ctrl c and then run it again which i'll show you in a minute but for now let me just sew and for the description let's just change this to travel website show casey the best travel desk donations and deals online so i'm just making up some random description ideally this would be something that would fit your website and what you think would make sense in terms of search engine optimization i'll just save that here and then let's do mailed my channel again so let me right click actually and inspect this and see if it's updated now we can restart this so let me just drag this up here and then i'm just going to go ahead and search up command f in the search of description and you can see here the meta tag actually showcases what we just updated so travel website showcase the best travel destinations and deals online so there's a bunch of additional things with seo that you can add such as keywords twitter handle etc but that's little i'll say not the focus right now but that's something you can add eventually to your site and then let's go ahead and let's go to the src so right now we have the pages now the thing is with gatsby versus just regular react is i can go ahead and actually create a page automatically so if i hit new file here and just type in like um random.js and then i just like copy this index and just paste it in here and again you can watch right now to show you i can go up here and just type slash random and you can see right now it's currently not showing so what we need to do is actually do command j open up the terminal control c close this and then essentially stop it and then we have to run gatsby develop again and then once we run that and it finishes then i'll refresh the page and then it should work so now you can see here that it showcases there so if i say like this is the random page save it now you can see that this random page actually works and then if i go back to the home page now it's back on the homepage so now you can see that it was that fast and then we just created essentially another page literally just by creating a file and then just everything else you just add your content in there so i'm actually going to delete this so right click delete that and move the trash and then here's some typescript we're not going to use that for this video so we're just going to delete this here also page two let's just leave the pages for now also this is a 404 page so this is essentially if this is like you go to a link that doesn't exist so let me just type in like random letters it's gonna essentially if i click right now since we're in development mode you're not gonna be able to see it but if i click preview custom page this is ideally what it looks like once you deploy it and that's just like an error page so essentially just showcases like you can't actually go there and actually on the uh the live site let me let me go here let me just type in random stuff here this is a custom 404 page i made that i forgot to show you earlier and then you can now obviously customize this too and then it returns home here that's just something a little fancy stuff right there but that's ideally what we're gonna have creating two then here's some images and this just has like the icon so the favorite color up here and then also this is like the astronaut you saw there and here are the components so one thing is with gatsby is it has a layouts file right here so essentially this consists of like the navbar and everything so let's actually go to layout.js and we can get rid of this stuff right here so this is graphql right here and we're querying for some data so i'm actually going to hit delete on this let's get rid of line 10. let's get rid of these comments up here let's get rid of these prop types and let's see get rid of the inside the header get rid of that this div right here let's erase this let's erase this footer and also the div underneath that and then let's get rid of these prop types here and also let's delete the layout.css because we're going to be using style components so let me just save this let me fix this here so this is what your layout should look like right now let me go back to the home and it's what currently looks like right here and then let's just go delete the layout.css and then here's an image and this is utilizing you can see here guys with image we don't need this because we end up creating our own queries so let's just actually just delete this image.js file here and then here's the header so this is ideally the nav or you can call the nav bar and let's see what happened here it looks like the image deleted so we have to do is go to index.js delete line 5 to get rid of this image and then let's just delete let's just leave everything in here besides the uh let's just keep this h1 here save it here and right now the link we don't have a link yet so we can delete that for now and you can see this is what we currently got going on so now let's actually go ahead and create our files alright so here let me go to the components folder right here and let me just go ahead and let's right click and do a new folder and let me just call this styles and again this is just one way to go about and organize your project again there's a million ways you could go about do this so feel free to reflect the code afterwards and then organize it to your own liking but this way i feel like it's just an easier way to just see everything so this ideally we're not going to put much in here besides just the global styles so let's just go ahead and right click hit new file and let's just create a global styles dot js file and we're not going to edit this yet so we're going to leave that for now but just make it right there in the stops folder now we're still in the components so just make sure you guys have that there and let's go ahead and create the first component that we're actually going to end up editing so aside from the header we're always going to have the hero section so let me actually go ahead and create a new file let me just call this hero.js you can call us whatever you want to and also make sure when we go onto the left side here if you click on extensions type in es7 go here and this is what you want to have and essentially this allows you to create essentially react components much quicker and once you download this one right there you should be good to get started so let's go ahead and let's start with the header component first and then we'll create the hero after and so let's go ahead and i'm gonna navigate to the header.js and i'm just gonna change the name to a capital h just so i keep them all my components with a capital letter so header.js and then what i'm gonna do is actually let's go ahead and delete line two for the prop types let's get rid of pretty much everything inside of here and get rid of the site title here and let's get rid of these prop types here this is currently what the header looks like so now we need to do is actually start creating what's inside so essentially this is the nav so i'm going to be using stock components to create the uh styling for this so let me actually go and looks like let me just save this really quick looks like the layout i'm going to save that one so let me save it here and that's fine let's just put now let's go back to header let's just put like a filler and i'm going to say let's actually change these parentheses i want to make them curly braces and then just do return parentheses let's just put h1 header for now and see i refresh it okay it's backed here and that's one thing too sometimes depending on when you're watching this is gatsby like delays the update so sometimes you might have to refresh the page and then also i'm going to show you another thing called gatsby clean that just ensure that everything is set to go in case you have some crazy air that makes no sense that's something you want to try too in case you're confused on why your code looks perfect but it's still not working that's one thing you can do which i'll show you later but for now let's actually go ahead and i'm gonna do command j and let's do control c so we stop a server and i'm going to install stock components so one little thing i forgot to add when it comes to installing stock components which i'll show later again in the video in the future of this but i'm just going back in the beginning and instead of just doing yarn ad style components we actually have to do go to gatsby and you can go ahead and just copy this line right here so you can use google gatsby plug-in style components and just copy that in there if you have yarn you can just copy up to the npm install word and then you can just say yarn add and paste this in and then go ahead and press enter and install these so that when you do go to your package.json then you'll have the babel and you also have stock components here so that's just one quick um thing you have to do before you proceed originally i had just saw components and we ran into some air so i wanted to go back and insert this little clip just so you don't have any issues in case you're following along from the beginning and then go to your gatsby.com or dash config file and just copy this right here gasp install or plug install components and then under um plug-in just go ahead and paste that line right here and that's exactly where i added here so this is some stuff we did in the future i added on but just wanted to make sure everyone's on the same page so make sure that you have this added to your config and you have this these installed so that you won't have to run into any errors when it comes to actually styling but i also have that in the future of this video which you'll see we run into some errors but we fixed it so now that ends it off here so i'll see you back in the video so now i'm going to do is i'm going to go to the top here and under import react i'm going to say import styled from styled components and i'm actually going to create all the styles within just this file instead of creating a separate and the header elements.js file and putting all the stock components in there and exporting it this is much easier makes it much easier i say to keep up with but ideally you could separate your styles in a different file but that's our preference to you and now let's go ahead and first thing is if you don't use style components it's not too difficult to understand think of it as like a combination with sas and also combine javascript as well we can pass in properties and i'll show you all that fancy stuff too in case you've never used it before but pretty much what we're going to do is let's erase this let's do parentheses and let's create a tag called nav so this is going to be the essentially the outside tag so essentially like the container containing everything in there and then inside the nav i'm going to have a link so essentially this will be the logo or the ideally you'd put this your logo image but since i don't have a logo i'm just gonna use text and i'm gonna call it called nav link and this is gonna be a link so with uh gatsby if you notice it's already here import link from gatsby ideally if you just use regular react it would say import link from react rider dom but gatsby already has that all built in with it so you just have to say import link from gatsby and you have to install anything extra and it works perfectly fine so you can just say like two equals to slash and then close it and then here you can just type in your website name i call this explorex for the filler and let's actually go ahead and style this so you can see what's going on so let's say cons i'm going to say constant ad let me close on my terminal say equal to style dot now with the back ticks and this is how you start everything and then i go inside the back ticks this is where i can start creating the actual style so if i want to say here background then we're just going to pretty much make this transparent for right now later on we'll create a function and essentially update this but for now let's make it simple and then let's set the heights i want it to be 80 pixels and this is cool i found out how to show you what's happening in real time because before is very difficult to show this but now if i do like cons nav link equal to style and the thing is for uh links like normally you'd say like dots html tell you use like a div or like h3 or ptek etc but for like a link for instance or like a component you'd say parentheses and then link and then that's how you actually style that and then you do the backticks there now i'm gonna wait off install this after but i want to just save this now just so you can see the actual um styles happening and now let me just make sure if i do like a um refresh here yeah so we're not connected so let's do command j go in your terminal and let's do gatsby develop again so i wish they had it where you could just you know auto refresh and hot reloads like all the time but at least right now this time it doesn't so maybe in the future we'll see that but for now we're gonna have to do a lot of closing and restarting this so let's do command or save this here now you can see we have a little nav bar here so let's actually uh let's make this red for now because um the video the hero section is not going to be until after we had that so you won't even be able to see what we're making so now let's go ahead and let me just put in the display flex and this is gonna pretty much uh make the nav bar the way it looks but since we don't have the actual navbar items then you probably might be able to see this happening but ideally this is just typical css we say justify content space between and then this is a padding i'm going to say 0.5 ram and the default ram is essentially 16 pixels so that's half let me say calculating parenthesis and then parentheses again i'm going to say 100 viewport width minus 1300 pixels and then divide that by two and then we'll have the z index let me just put some bigger numbers like 100 and then position is going to be relative so now we're pretty much set with the uh nav bar section and you can't really see what's happening yet but let's start this nav link right now so for here let's just say color let's just make this whites let me save it you can see and then let's just say display flex align items i want to make sure everything is centered text decoration since th these are links you have the underlines let's do text decoration oh i have a decoration to be none padding to be zero one rem height let's just set it to 100 percent and cursor is just pointer so this is just right here so we're actually going to need to do is create a data file to showcase the uh the nav link but before we do that let's actually import something here so let's do a on the mobile menu the bars so this is this is just a react icon so just bars and let's just close this out here and if you've never used react icon before or react icon let's just say that it's pretty much let me just bring it up really quick so here's react icons and pretty much you can search up anything so i put like um bar you can see right here we got like fa bars here etc whatever you want to use but pretty much uh i just called these bars you can you don't have to call them that but ideally what i'm going to do is actually say here f8 bars and what you need to do is you have to say and actually let me make sure my import reacts to the top but now let's do imports and the way you import is you say curly brace and then you paste that in the fa bars from quotes react icons and then you pick the the first two letters of the icon fa and that's how you do it there and then we can go down to the bottom and say cons i'll just call this bars equal to styled and the icon we passed in was called f8 bars so that's what i put here in the parentheses and then for the back ticks we're pretty much going to say display to be none on our desktop and let's just put the color make sure it's white but then on mobile responsive i want to make sure that this actually shows let's say at media screen and max width of 768 pixels and let's do display to be block let's do position is absolute and let me actually let me wait because uh we haven't even installed this yet so if i were to save this it's going to run an error it's going to say can't find react icon so let's actually do command j terminals open that back up let me ctrl c close the server and let's just do i'm going to say yarn add if you don't have yarn again do npm install and then just say react dash icons and then press enter and then it's gonna do gatsby develop again and then here i'm gonna simply refresh and i can see a little icon action right here so let's actually close this really quick and now let me show you positioning here so let's do top and since we're in mobile view essentially now it's going to display but let's set the top to zero set the right to zero and save it here you can see it's switched over then let's do transform translate ammo set to semicolon here let's do minus 100 comma 75 save it here so now i get shifted there and then let's set the font size to 1.8 ram and then cursor pointer this is essentially positioning right here now right now the styles look weird because we haven't actually added global styles so remember in the beginning we created this global styles file here so go navigate over there and then here i'm going to go ahead and just type in imports create with the curly brace create global style from style dash components then under here i'm going to say export const global style equal to create global style and then two backticks and then we do a little shift eight little asterisk mark here and then curly brace down and let's set the font family and i'm going to use roboto so i'm going to actually add that in eventually but for now she's going to default since we don't have it imported and then let's set the margin to zero the padding to zero and the box size into border box let me save that there and you're probably wondering what happened why didn't it work so now we actually need to do is we go to our layout and let's actually add this here so let me just put this on the top here and just say global style and notice that it auto imported for me at the top already you could also press ctrl space and then press enter as well and that should import two sometimes it works sometimes it doesn't so if it doesn't work for you just simply just type it in and import at the top and then i'm just closing the self closing tag and i can see that the margins are around it and everything looks nice and snug so now if i go back to the section off here let me actually yeah let me just text out this and let me just keep the header.js now you see when i increase the desktop it disappears and mobile is back so now we need to do is actually create a data file because you can't even see the actual menu items so now let's actually go ahead and this is just one way i did it there's multiple ways you can go about do this but let me just show you different ways you can go about and test it out so now i'm actually gonna have this and this is inside i say this is outside the components and put this on that root directory you can put this in the components it doesn't matter but let me just do src new folder let me just call this data and then here let me just say new file here and then let me just call this wall let's see let's just say yeah let me new file here let's just call this let's just say menu data dot js and pretty much we're just going to pass in our menu item so i'm going to say export i'm going to export this cons and then i'm going to call it menu data equal to an array and then we'll pass in a curly brace and then the title so you call wherever you want to but ideally this is the name of the page so this one's going to be the about page for me and then after that i'm going to call the link so i'll name this link and then it's gonna be quote slash and the link i want to be is the about slash link and then i do a comma here and if you do shift alt down arrow then this copies it down for you if it doesn't work just simply highlight and copy for you and then let's just change these additional ones here so let me just call this trips change this one to trips here and then we have careers we'll change this one to careers and then also here let's just do contact and go here and let's just do contact here now i'm going to save this now and i'll navigate back to our header.js let's scroll to the top and i think it's now ready to do and let me actually do command b so that you can see more and it closes on my side but now we need to do is actually import this i'm going to say imports curly brace and whatever you called your data so we named this menu data with a lowercase m so menu data and this is going to be importing from course dot dot slash now you can see the data folder pops up and then slash again and we have the menu data so now let's go ahead and map through this so that we can display this so first before after the bars we're going to create another cycle point called nav menu to close that out and then in order to display this data we actually have to map through this so i'm gonna say curly brace here and then the name of the data file which we call it up here is menu data so we say menu data then you do dot map and then we say parentheses and then pass an arrow function in here so i'm going to say parentheses again go outside this first parentheses press space equal arrow function curly braces and now we have little arrow function and actually let's let me let me change these to parentheses so just you have to put in return so i have the change your first uh curly brace to parentheses and then the first one right here two parentheses here so now we have it like this and now i'm just going to pass in my other cell component which i'm calling that link i'm going to say nav link and then here's where we can actually pass in the data dynamically so that we don't sit there and manually add like five links here so i'm using nav links two so essentially the two path and we're going to set equal to when you pass and click braces and the thing is we have to pass in props here so i'm gonna say item you can call this you know whatever you want to but i'm just calling this one item and then i pass in an index just so i can add that as a key because the react gets mad if you don't have a key inside but pretty much here we say item which is the first parameter we have here dot and then whatever we call the uh the data so we called it a link so this is essentially the path like two slash here this is the same exact thing except we call it link so it'll be two item dot link we'll go to whatever like we put and then we're just passing a key curly brace called index because as we passed in there and then let me just close this out and then inside this nav link we want to showcase the actual title the uh name balance the trips paid contact page etc it's gonna say curly brace item dot title now when i say this is gonna run into an error because these aren't defined so let me actually go ahead and go down here let's say cons now menu equal to styled dot let's do div back back take let me save this here and i can kind of see it here but let me just see actually let me make this desktop yeah you can't really see anything besides the about so now let's just start this nav menu really quick and then once we do you can see all the menu items you just created so let's just say display flex align dash item center margin dash right and let's just do i'm gonna do minus 40 pickles because it was like off the centering based off my design again this is not you don't have to have that and then let's just do at media screen and max width because ideally i don't want it to show on the mobile responses so let's do 768 pixels and let's just say display to be none so i'll save that there so right now this appears but when we shoot this over now you can see that the actual nav menu is here and this is exactly what we had created when we made this uh data file so we had about trips careers contact and i click on them you can see in the url that it updates based off of whatever you put for the link in your data so now you can see that's working fine so that's perfect and then now i want to do is actually create a button so let's just go here so underneath this curly brace we have nav menu and then underneath that let's enter here i'm going to call this nav btn and then here i'm just going to pass in and let's just do uh i'm going to create a cousin button in just a second but let me just pass this um just say hey for now and let's go down here and let me just say const now btn equal to styled dot dave with the backticks and let's pass in our file here let me pass this in and then i'm going to say display flex align items let's just say center let's do margin dash brights of 24 pixels and at media screen and max width for more responsive 760 pixels there's gonna pass in the curly brace here let's just say display to be none so right now it's not showing but we shrink this over you can see that it has hate so ideally on the uh the button would showcase here so let me actually add that in so let me shrink that again and then let's do command b and i want to do is actually create another component so wrong components folder click new file and just call this button dot j yes this is essentially going to be reusable buttons that we have to sit there and like type in button every single time but you just pass it in and then add additional properties to it so here i'm just going to say import styled from stock components then import link from gatsby so i'm calling this a button but it's essentially going to be a link but there's a cool thing you can do with stock components for you say as equals and quotes and you can change it to something else if you don't want to use it as that but then i'm just calling this button because ideally this is only linking internally for my designs i'm going to say export cons button equal to style parentheses link comes in gatsby you got the double back ticks i'm going to say background and essentially this is a cooler way if you've never seen this but uh pretty much you say dollar sign curly brace parenthesis curly brace so now you can pass and i'll be structuring this too by the way but i delete this be like props that primary but here i can just destruction say primary and then outside the clear brace outside the second parenthesis we'll pass the arrow function parentheses again then you type in primary so again you can name this you know tacos it doesn't matter what you name this this is just pretty much a way to tell you what you can add as properties on the button to change the design of it so if mine's called primary because this is the color of the background i'm using a operator so question mark here so essentially if this has a property primary and it's true then i'm gonna pass in i want the color to be f two six a two e and then i'm gonna do the colon and then quotes again let me do command b and close it out and if it's not true then i just want it to be hashtag 0 7 7 b f 1 and then semicolon here and then let's go ahead and let's add the white space no wrap and then let's set a padding and let me just do again dollar sign curly brace parenthesis curly brace and i'm going to call this one big so outside the curly bridge parenthesis error function i'm going to say pregnancy big if big is true i want to be padding to 16 pixels by 40 pixels so since it's the size of the button else i want to set this equal to 10 pixels by 32 pixels and then let's do color hashtag fff let's do font size equal to and let's actually copy this this padding's big section because i'm going to use the same thing here because ideally if i have big button i want the font size to match two and then just set the font size to 20 pixels else is going to be 16 pixels and then here let's do outline to be none let's do border to be none and then let's do min dash width just to make sure it's at least 100 pixels and let's see let's do cursor pointer text decoration none and i have a hover effect so let's just say transition let's do 0.3 s and i'm going to be using animations 2 so i just want to ensure that this has the actual uh transition so i'm going to say important now ideally you wouldn't need to add this if you just had like typical buttons but the animations were overriding this so i had to use this for that and then let's do border radius and let's do again dollar sign curly brace parenthesis curly brace i'm going to call this round so essentially it's gonna be rounded if it's not and then arrow function parentheses round if round is true set it to uh 50 pixels i'll set it to just none so there's gonna be just typical um like pointed buttons and this is a way to add the hover so essentially nested in here so the way you add hover is you just do and colon hover spell it right click brace and then let's just do let's just copy this line background color paste it here and let's pretty much let's just replace these so let's actually command x this out erase this cone so make sure the first color here is the zero seven seven then we say coin again paste that one in there so essentially just vice versa replaces it and then let's do transform translate y and let's just do uh minus two pixels this just makes like a little rises up a little bit now command b now let's go back to the header and let's go to right here in the nav btn i'm gonna erase this and then now we can actually just import this button into our component so i'm just gonna say button press enter here so now you can see imported button from button and then close it out let's just say uh what did i put here let's say book a flight so save this now close it out and now you can see that the button looks like this but our button on the original website looks like this so we're going to do is i'm going to pass in those properties so let me see if i can do it like this maybe you can see better yeah that's fine yes i'm going to say what we call so we had primary and so that you go to true also i went around equals to true and then since this is a link then i'm going to set the two value equal to just a slash trips for now and pretty much i hit save and notice how the button completely changes so you can see now it is orange and it has a little blue raised little up to so this pretty much is how we created the nav bar now i just need to add some states and additional things but let's actually go ahead and worry about that later let me actually go and start creating the hero section now so the video and then you guys can see how we added all that stuff so let's hop into vs code and create a new file so let's go ahead and we actually have that created my bad so if you don't have that make sure you have here.js and let's start adding on our code all right so let's start creating the hero section so the first thing we're going to do is use the shortcut the extension that we installed earlier which allows us to create essentially a react template fairly quickly just by typing r a f c e and then you press tab and you can see here import react from react creates a arrow function and then we can just add in content in the div so here we can just be like hero and let's save this actually let's do um let's do h1 so that doesn't erase the uh little parenthesis and now if we go to pages go to our index.js and then for just replace this hi people with hero and then see before you close it just press enter to auto complete or essentially auto import it and then slash and then we save so now you can see it is imported so now if we go to hero.js and add stuff to it it automatically updates live right there in front of us so now let's actually go ahead and let's start adding the content so first thing is i'm going to get rid of these divs and then within the return i'm going to add a style component called this one hero container again this is just what i decided to name my style components you can name this to whatever you like and next we're going to do i'll just call this the hero bg for background so i'm gonna say hero bg and then within this hero bg is essentially going to be the video so i'm gonna call this video bg you can just call it video i mean in terms of tutorial's sake i guess this makes more sense for me but let's put uh src equal to empty code for now and then simply let's put the type equal to video slash mp4 and then we're gonna close this out and we're gonna add all of the other properties in just a second but let me just start styling this first so we can see what happens so now let's import style from style components so import style from style components and then what i'm going to do is going to the bottom we're going to simply just add our styles here so i'm going to say const hero container equal to style.div backtick backtick now before i add the styles i'm going to do uh copy it down real quick so shift alt down arrow and let me just add this just so that i can show you the styles live without it giving me the error so then hero bg and then let's do hero now here by my hero it should be video bg and then this one's going to basically be a video so let's go and erase this div call this video and let me put some spacing in between and then let's just hit save so now it is invisible nothing's there so first i want to do is let's add in the hero container style so let's go ahead and i want to have a default background color just in case nothing shows up so i'm going to say 0 c0 c0c save that there and then let's do display to be flex and the reason i'm doing these the display flex and everything so that the content inside of it is actually nice and centered so then we can do justify content let's do center here and actually let me see if i can uh i think it's better if i wait and put the actual content first and then we can do all that stuff so let's do uh outside the hero bg i'm gonna go under and i just call this hero content so essentially the text you see so let's just call this hero content and then i'm going to call these hero items so let's say hero items and then here is going to be my h1 so i'm going to say hero h1 and then inside this h1 i'm just going to say unreal tested destinations and then under the h1 we're going to say hero should be just like show for a paragraph tag and just say out of this world so that's pretty much that part so then after the p tag we just want a button so we have the button we created earlier in the styles folder i'm actually going to stop them about under the styles folder here so we can just import that so we can just say button press enter and not sure if it actually imported so we do control space again press enter and now it looks like it works and then let's close this out i mean it should be duh not self-closing just normal closing and then here just add travel now and also i'll add that in a second the uh style says but let's just add these to the bottom real quick just so that we can actually import this because if i were to say this right now it's going to be like what are these so here let me just do uh alt shift down here again so i got one two three four and then let's just do let's see we got hero content this will be a div and then under here we'll have hero items and then this is going to be a div not the video so it did right there and then we got hero h1 hero h1 and this is just h1 and then we'll have hero ptag so now if i save this now it should work and let's see if you can see you can't see the text because it's dark so let's actually add a color to the top really quick just so you can see this so let's just be like color here all right perfect so now you can see that so now let's start adding the style so let's do a line items 2b center and let's set the height to 100 viewport hydra so you can see like what's going on all right there we go and then let's do padding let's do zero one rem and then let's do make sure it's positioned relative because we're going to add this little overlay effect to it using position absolute and we need this in order for that to work and then let's do margin dash top to be minus 80 pixels now this is a little um little trick i did so that whenever the uh the background transparent for the header this is just one way to do it there's alternative ways where if you just imported the header like into this hero uh component but since we're using ghastly with layouts i wanted to keep my header and eventually we can add a footer below this on every single page so that you don't have uh so that doesn't add confusion or any issues and then let's go back to hero scroll this out really quick see how it looks this is kind of what it looks like so now we can actually go to the header.js and let's remove this background and make it transparent so now you can see that it's nice and snug and i use minus 80 pixels because the website is or the the header height is 80 pixels so if you have a smaller uh header nav bar you'd obviously only do negative margin to the size of the actual nav bar you created and then let's add i'm gonna add this overlay after we have the video because you're not gonna be able to see it but for the hero yeah let's actually go ahead and uh let's add the video so i have my files saved up but let me show you the site i got these videos from so here's one site called pixels videos and now you can see that here if you scroll down there's a bunch of different videos but what i'm going to go ahead and do is type in travel press enter and then you can just go here and pick whatever video that you like and i already have my videos downloaded so i'm just going to drag those over but like just looking through here you can see the scroll down and like this one looks pretty cool this one actually i'll probably use this one too if i didn't have my previous one and i can just hit here play and you can see this little drone footage and it's nice and slow and this one looked pretty cool too and then what you do is just go over here to download and i just did full hd because if you use the original it's like a massive file and depending on your computer this would make your website super slow so you can just go with full hd and that should be fine you can even try hd but just depending on screen size it might be the story or whatnot and then you just go here and click on free download and then pretty much you have your downloaded file and then once it finishes then you literally just have to drag this file into your actual uh project now let me actually let me drag in the files that i've already have for this project just to save some time so let me just go back here and then let me here you just go here and then if you don't have a mac you just open this or i'd usually do show on finder i don't know what the windows version would say but this pretty much shows you the file in your folder and then you just drag it over so let me drag mine over really quick so actually before i do drag that over let me create an assets folder so just go here over src and click new folder and actually it looks like i'm inside the components let me make sure i'm outside of that and then i'm on the src new folder here and let me just type in assets and then pretty much i'm going to do a new folder again let's create a videos and then now we can go ahead and drag in the file so here i have this video which you saw in the original design and right now you can't really preview it but what you can do now is when you go up to the top and you just go here you can import this video and this is a different way of importing it versus hard coding the actual path so if i just say like import and then that's what you would name the actual title of what you want to call this so i'm just going to straight up say video and then say it's from and then we're going to go into our assets folder so dot slash then we have assets actually magic mistyped assets right there and then slash again and then it's going to be videos and then slash again and then the video i called mine travel to mp4 when you drag yours in it's gonna be like a bunch of random letters so just rename it just right click rename to whatever you want to and then for the src instead of having quotes we'll pass in curly braces and then we'll just pass in the name that we call this which is video right here and i'll hit save and then right now you can see we have this video background so again feel free to uh figure out whichever one you want and right now you notice that it's like a picture like nothing's happened so we need to do is add some properties here so to the video tag let's do auto play let's loop it let's make sure it's muted and then also let's add plays in line just so that uh this works with iphones on mobile and then let's save this here so make sure you click yeah here and then let me actually yeah save this again just make sure and now you can see that we have the video auto playing in the background so that's pretty nice right there and then we can go ahead and let me actually drag in the one i just showed you too just to show you the difference so like here this was the one that i showed you here and i drag that there and then let's just call this one travel two so now i can just go and just show you how you can like switch this out if i add travel to save it and you can see we got that drone video we have here so now you obviously depending on your preference which one you like i think this one looks pretty cool it just all depends but i just have this one for the original one so we'll just keep that for mine obviously do whatever you like but now what i want to do is style this because you notice that the actual content it's gone like you can't see it so we need to do is add some content stuff to this actual hero bg so first thing go here to hero bg and then let's make sure let's add a position absolute and then let's do top zero bottom zero right zero and then left zero then i wanna make sure the width is a hundred percent height is a hundred percent i don't know what keeps auto and then let's do overflow hidden save that here now nothing has changed yet but now for the video bg let's go here and let's just type in width to be 100 let's set the height to be 100 here let's do o dash object dash fit colon cover then let's do object dash fit cover and then for the hero content because right now you can't see it let's do z index let's just set it to 3 and then let's set the height to be calculating of 100 viewport height minus 80 pixels then let's set the max height all right my max height 100 and then let's set the padding of zero ramp top bottom then left right calculating 100 per width minus 300 pixels divided by two save this here so now you can see that the content is within so now then it's over because of the z index since we had position positioning on here it was essentially hover or covered so now we have it above everything and now we can do display let's do flex here flex direction let's do column let's do justify content center align items center text align center let's set the height 200 before height then max height let's set that to 100 percent and let's see padding zero let's set the color hashtag fff let's set the line height 1.1 font weight let's just make it bold for now and last but not least color is essentially going to keep it white but since we have it on their actual container it's fine but if you were to change it from a different color because the file is usually white you can go and add that there but let me just keep it like this should be fine for now so you can see everything centered here so now i'm going to do is just finish up the song here so let's do uh font size and then we use this function called clamp which essentially it makes the fonts more responsive without having to add media queries so essentially the first value 1.5 ram is the smallest value you want the font to be the next is the viewport width so you can raise this up from like two to whatever infinity and this just makes it bigger depending on how high you raise this and then the max size you want is for that property which i put for rent and you can see right now the uh the font smaller because the viewport it's a shrink screen so you can see how like it just resizes the unreal destinations text which is h1 that's all because of font clamp next we got margin dash bottom 1.5 ram save that there and then let's do letter spacing three pixels just make a little difference let's do font weights let's do ball and see how that works for now and it looks like since i already have a um actually i haven't even um imported the the font so antagonize h1 so we should be fine with that we'll leave that out for now let's do padding zero one around here and you can't see it yet but when you have like a smart screen it won't touch it which since i have the padding and then here let's just copy this font clamp or font size clamp and let's change this to one rim let's change this to 3ram i'm going to change it to 3v4 with let's do margin dash bottom 2 ram and we should be fine there so now you can see shrink it out here like this and now let's add some properties to the button so that we can actually see it so right now we go back to button and let's do primary equals to true let's do big equals to true let's do round equal to true and then let me set the to value equal to slash trips you can see we got a button here and i click it it goes to the trips url and then if you notice on the original the actual background is darker i just did that so that's easier to read the text because with these type of video backgrounds if it's like not dark it's really difficult to see the text so what i'm actually going to do is i'm going to add a little overlay to that so here let me just go to hero container and then we can do is colon before and essentially let's set the content to empty let's position this so position app and hold on position absolutes and we actually copied this um right here 10 degrees so let's just go here reaction semicolon and then let's do z index of two and then let's set the background to be a linear gradient do 180 degrees comma rgba of zero comma zero comma zero comma zero point two and then outside this we're gonna say percent or zero percent let me say comma here and let me fix this missions background and then we can just copy this again so let's just copy this and then paste it after it and then let's just set this to 100 and then i want this to be 0.6 and then now we're at this last parenthesis i'm going to do a comma and then pretty much let's just copy this again so let's just say linear gradient copy this line one more time paste it here and then let's change let's see let's make this a second part transparent 100 so now we save that now you can see we have this background overlay so in case you didn't see just pause the screen really quick and then you can just see the exact code here so align by line 180 comma rgba comma this line parenthesis combo and then this again and now you can see we have this nice little overlay on the video background and looks basically the exact same the only difference is for this p tag if we set it here let's just add a font weight of 400. so now it's like a little thinner and now you can see is what we currently have right now and then here you can see these navigates to different pages so now let's actually go ahead and let's create the next section so the actual uh right here this little product car section so let's create that so now let me go and let's do command b and let me show you this little trick on vs code if you click on open editors you can just click this x it closes up everything for you so it's pretty sweet for that and now let's just create this next section so i just called this trips again you cause whatever you want to but let's go to components and let's click on new file and let's just type in trips.js alright so now let's start adding the code for the trip section so i'm gonna go ahead and do the rafce shortcut press tab here and then let's just go and let's do h1 say trips save that here and then let me go and go to index.js let's just pass trips in here and let's save it and let's make sure that it's working so let's refresh the page and looks like let's see command j let me close or control c to stop the server and then run gasp develop again and then once it loads up we'll see if everything's working i might have to add a uh style to this just so you can see so let's see refresh it again all right perfect now we got it working so in case yours doesn't uh show try that also quick tip two let's do ctrl c again sometimes even after you restart it it still doesn't work or show what you want so you can run gets be clean and then just press enter and this essentially ensures that everything is refreshed and then you can do gatsby develop again and then it should do the exact same thing restart so that's just a tip in case you're following along and it's still not showing like updates but this is like the first part of the website so we should be fine but in case you do see errors that is something you can try out and then if i refresh it too just to make sure we are perfect okay so now let's go back to trips.js and let's just pretty much we can't really do much yet because we have to actually create the uh the data file but for now let's just return a let's make a product container so let's do products container i misspelled that hold on container and then in here let's do [Music] products heading and then inside of there let's do product wrapper and then let's just put like um wrapper here in my bed hold on me command z this should be on a separate line so this should be heading and then under this should be products or product wrapper and i mean you can name products and same thing and i just put wrapper here and then let's import style from components and then let's create it down here so cons products container equal to style dot div with the back ticks and then let's follow shift alt down twice let's change this to products heading and then product wrapper here so now let me add some style so let's do inside the container let's make the minimum height 100 report height let's set the padding to be five round top and bottom and then just calculating 100 report width minus 1300 pixels divided by two let's do background to be hashtag fff and then color hashtag ffff so right now you can't see anything because the color is white and the background is white but now you can see that at least we have something here and then let's actually yeah let's make this red just so you can see like what's happening and then the products heading we can just sit here and let's just say font size clamp 1.2 ram e4 with three rem then let's do text align to be center margin bottom to be five ram and then color zero now we're going to leave product wrapper because uh we need to actually get creative function that maps through our data file and then essentially displays the cards because this isn't i didn't hard code each one individually i mapped through my data and it just displays four images which i have set there so what i'm going to do now and i'll just see you have this data file here so to my knowledge at least when i'm filming this that you need to create a json so json file for the graphql to read it if anyone knows alternatives with normal js to utilize gas via image definitely let me know but so far this works for me so i just utilize this so in my data folder right click and just call this let's just say trips.json for now and this is different from like a typical dress because you don't do um certain things so what we can just do right away is we can just go like this and do an array and then in here we can just pass in our object with our file our data so for instance here i'm just going to call this img for image colon and then here's where you would actually add in the images so we're actually going to add the links to the images now and then we'll import this eventually later but we can just do dot dot slash and it's gonna be inside the assets folder and then we're gonna do slash here images slash travel dash one dot jpg so this is what i called so let's actually let me fill out this first object and then i'll show you the place i got the images so let's go here let's do alts and this is for the like the alt and the image so this one just tien tan buddha and if i mispronounce that doesn't let me know i'm not too sure the exact pronunciations but and then for name this is just the uh like right here this actual thing you see that that name right there so that's what i'm typing here you can name this title heading it doesn't matter and i just call it a name and it's just the same exact thing as the alt and then for the button which is the the button on there i just want the label to be just called view destination all right so now i can add a comma here and i can just copy and paste this so it's command c under paste one two three times and then commands close my terminal so now we can pretty much uh add edit these so let's actually let me show you let me save this really quick and then let me show you where i got this image so here i just went to pixels.com so this is the same site with the videos except this one actually has images without videos so you don't go to the actual video link so here you can just type in like travel here and they can switch the orientation to vertical depending on which style you want and then you can go in and straight up like take any of these photos so like i spent a long time going through this and finding specific photos for by example but like if you want to go here you can click this free download and then i just pick the smallest one for here maybe medium depending on how big your screens are and just download that and then you just drag in there so you can go ahead and download four different images or you can just use one random image for now just to use as like a filler and then go later on and spend some time looking through these images there's also alternative websites like unsplashed like this book this one actually looks pretty cool here and you can sit here and just go through pick whichever images you want to and then go ahead and drag those to your folders like this one over here looks pretty cool with the eiffel tower and you get the point here and you can also check out like um like you can type in like famous uh places people travel like bali and if i go here you can see there's a lot of good pictures here so this one looks pretty nice and i had a bunch of different images but i just want to keep it simple for this tutorial so i just picked whatever but again have fun with that and then you can get any four images it really doesn't matter which ones you use as long as you get four or three to whatever or you could just do like me where um you can just copy the same image four times in case you can't find any and then what you need to do is drag that into your uh project so let me go ahead and find my images so let me bring the assets folder down and then we actually create a folder for images and then i'm going to drag in all of my different images here now i have multiple images here so let's just do uh drag these over here and see looks like let me try it one more time because it didn't work so now you can see these are the images here one two three and four so this is the fourth image here and again these are just general trial images you can use whichever one but just note that i renamed them travel dash one challenge two etc so now in my json file i can change this one to like travel two same with this one here channel three and travel four and then i can just update the actual alt text like this second one was like add gear same thing here again i'm not sure if i'm pronouncing this correctly let me know and then the third one let's just say h u m a y n two i'm gonna try to pronounce this one and then just copy that and then the last but not least let's go here and let's just say u n h i n d a false and then i'll copy this here so again this would be specific to your design or you could just leave it as default doesn't really matter but now we can do is if we go back to the actual trips.js so i'll go back here we can pass this data into it utilizing graphql so if you've never used graphql let me show you command j open terminal ctrl c to stop it and then let's do gatsby develop again so since it's a json file we don't have to import this at the top because it automatically will read this on our pale our project so once i show you you see how we have the normal localhost 8000 then we have this thing called logo hold slash i'm just going to talk graphql do command click on this and it's going to open up this window here so let me actually have previous stuff here so let me drag this open and then let me refresh this it looks like the json file is not displaying so let me make sure that everything works out so we me let me see so actually yeah let me check my uh gatsby config and looks like i'm missing the json plugin so let me go ahead and let me add that real quick so here i just google gatsby transformer json so let me click here and let me show you we need to install so i can read this and now we just need to install this so i'm going to go ahead and you can copy npm install gatsby transformer json i have yarn submission do ctrl c i'm going to say yarn add gas b trans former json if you don't have yarn just do it to what the um docs say here with npm install so i press enter here so now it's installed so what we need to do is you can share it on your gatsby.com config file and then let me let me go under here let's see let's erase this stuff here and then under this so we're like at the bottom of this um right here in the plug-ins we're inside of this array and we're at the the bottom very bottom and all you need to do is just copy this code under the plug-in so this line here here all the way until you reach the second or the last bracket or essentially the array copy this and then paste this so make sure you have the backticks comma and then the object or essentially resolves gas resource file system so this is already have we already have that here by default you can see it's like this and then also you might want to add two so let's go here on the top and then just in case your videos aren't working we can do command c press enter paste it and then we can change this one to videos so this is just a way for gatsby to like see your videos and or essentially your files within your project so now we have this and then we have the data here so if i save this now what essentially is happening is gas resource file system which you guys want to check out on the um official docs you can even see it right here it essentially looks inside your project a particular file so you can see like this is more stuff on the actual docs on like the details on it but for this example we don't have to go too deep into that but pretty much it's looking in the src and then in our data folder so you can change this obviously but here it looks in src data and then whatever we have here so now if we run gas b develop now uh now once that's loaded let me go back to graphql so once this finishes up when i refresh this this should showcase the um trips.json data so right now let's see what we have here guest resource fosters does not exist so let me make sure i have this actually implemented so it should be here on the package.json let's see plug-in plug-ins yeah so sourcefox system then we got json sharps let me try this let's do control c let's do guest b clean and then let's try gatsby develop again and let's see if that fixes the issue so now still saying oh let's see it's not just on your file system for src slash videos okay so let's check that out so i think yeah okay i know why the problem is so config this should be for images src slash assets slash images and then good thing i caught that here and then this should be s receive slash assets videos so now that was the error because the images and videos are inside the src i don't know src here and then it's inside the assets folder and then it's there so that's why i was missing that so now this should work now so let's do cats redevelop again and then once this loads up everything should be working now unless i mistyped up so it looks like it's doing well please make sure all right so now it's finished so now let me refresh graphql now and boom did you just see that this is now currently displaying from the json file so if i were to just click on trips.json and also we have this thing called alltrips.json so let's actually click on this and then we can go through here now all this is your first time using graphql you might be like well what is this so don't really worry about this too much because all you need to know is how to access the things that you need from your data that's all you really need to focus on for now and then eventually you can figure out the rest of the uh additional things later but pretty much what happens is it drops down and shows you a bunch of options so like if i click here on edges and then node now you can see we have all of the things inside of the data the json file so like the alt tag for the image the button and then we also have the name and then if i hit the little play button right here it's going to show our data which it this is just a naming convention by default it just names it all trips dot or an ultra json and then it shows us edges and then node and if you guys don't know like what edges are knows et cetera the graphql has a lot of um detailed dots displaying everything but for now i don't want to confuse you with what this exactly means and just to show you like how you actually get data and you can see like here's the alt the button the name from our actual uh data files you can see here so if you did everything properly it should show your data like this and then also like the image you click on the image and then let's see you look for the src or essentially let's see if it has the um see public let's just check you check the poke hero for now you can see it says the image travel dash one travel two channel three travel four etc so ideally what you do is you do child image sharp and then you i click fluid there's also fix but when you click fluid essentially this is what optimizes the image based off the screen viewport you're on and then here you can do src here as well so now you can see the same concept except in the actual code when we add graphql we're going to be utilizing essentially this entire thing right here this query right here so if you're still confused i've never seen this before you have no idea don't worry once we actually start adding it it's all make more sense so let's head back over to vs codes and we screen shrink this right here and let me actually let's see maybe not to read that really quick but right now let's go let's x off this config and we can actually have pretty much everything except the trips.js file so now you're probably wondering how do we actually display this to our site so let me let me get rid of these extra pages here all right so here we are so we have to import graphql and also going to use a hook react uh use static query so actually let me let me bring that back up so here on the docs i just just google search really quick gatsby you set a query and you can read in the details of how this works but essentially let me just do it side by side we need to import this at the top so imports use static query and also i'm going to import graphql and we're going to import this from gatsby now we need to create the graphql inside of this actual trips function in order to utilize this so here under the trips first line let's do const then call this data i'm gonna set this equal to use static query and you can see right side by side like just like the dots showing and then what you do is use parentheses and then say graph ql and then two back ticks and then go inside the backtick press enter and now we're inside this backticks and then what we need to do is essentially query the data so i'm going to say query and then you can name this whatever you want to i'm just going to call this trips query you see on the docs they call it header query and then i would name it something that makes sense and then in order to actually get this data we have to utilize the name of this so this is all trips json so if i go back to grab ql and i scroll all the way to the top on the on this section on the left it's called ultra json so if i wanted to get like uh all site all files etc i would do all files whatever which one you're trying to query but this one is ultra json so i'm going to say all trips json and then do curly braces enter and then now you want to target the data so this one says site site media title so this is it you're doing like the um usually this is like seo but for here if we go here let me exit this off and show you drag this over here it's ultra json and what we could totally do just straight copy this so let's just copy this in here this is ideally what um people usually do and then we can just copy over this and then we can just change this to trips query here all trip json and see what happened essentially it targets the edges and then the node and then we have inner data so back to our uh where's my data file here we have img alt name and button so we have alts name button img and then we have child image sharp fluid and then src but usually what you do is you can just do dot dot gatsby image sharp fluid and this essentially it shows all the additional properties under here directly with just this line right there so before before we save this nothing's going to happen yet but let's actually let's see what we need to do now is create a function to essentially push all of these data points into our page so let's actually create a function underneath here so i'm just going to call this one function and we can just say like get get trips and then that parameter is going to pass in data and this is something i got off of someone i saw function online so you have a better way of implementing this definitely let me know but for right now let's just create an array so let's say cons trips array and just set it equal to an empty array and if you're watching this right now you're like you're super confused don't worry because once we create this function and then i create them and start to split the data it'll start to make more sense but this might be confusing i can see if it might be confusing when you're first seeing this for the first time but pretty much now we need to do is target the data so we're going to say data which is again this is this is the data and then we're going to say dot all trips json dot edges dot for each so now you're probably what is what is this so essentially we're targeting the data right here then we're going into the ultra json there we can go into the edges and then we're going to essentially go through all this data here so let's say four each and then you pass in the arrow function so let's do error function here i'm going to pass in item and index for my parameters here and then we're going to call the array right here so we said trips array which we just created up there and then we're going to say dot push parentheses and then here we're essentially going to push all of our data so let's actually let me just do regular like uh like just codes like html tags and now it changes the style components afterwards let's just say like div and then let's press actually you know it doesn't look like it's working here so let's just do div here and then let's say inside this div i don't have the image so let's just say img and also with gatsby image you have to import this at the top so let's just say go back to the top and let's just say import img from can't speak image and if you want to see more details on gathering images quick google search their docs they have a bunch of information on this but img here and then for the src i want to do equal curly brace and then i'm going to pass in the data so we passed we have here is item so what i'm going to say is item dot then look for the node so now i'm inside here i'm going from edges now where the node and then i'm going to say dot img dot chat msharp dot fluid dot what i want so what i want to do is item.node dot img so i'll bring this on the slide so you can as you can see so essentially you just say dot dot whatever you're trying to access so if you actually um access data before this should be too difficult to follow but i'm gonna say child image sharp and then dot fluid and then i want the src value here and then the curly brace and then also i pass in fluid so let me do command b and see more equals to item dot node dot img dot child image sharp dot fluid so this and then you just close this out so this is essentially the um looks like my div with the bottom closing div here so this is essentially this line the fluid line makes it optimize based off of what you're using so here we can pass in um on this div key equals to index because guess we does not like not having a key and then for now that should be good enough let's actually after this let's go ahead and return this so underneath here let's just return trips array and then for the wrapper let's just do curly brace here and let's say get tripped so now we're using the function here and we're going to pass in the data so let's save this for now and let's see what come up from this so now you can see our images are displaying so all this code we just added up here this is graphql if you've used gas before then you've seen this so it's not too hard but it is your first time this might be overwhelming but after a couple times you're going through this you'll start to get used to it and then here i just created a function that essentially goes through the json the data and then essentially returns the data so we still have to finish this but i just wanted to show you like the initial start and then here at the bottom i just created the wrapper and then just passed in this function here so now if i go and show you this is currently what it looks like so now we just basically got images using graphql and using gatsby image so if i right click this and inspect you can see how all these images have like all this crazy properties on here if normal normal code it would just be like img tag and then like the src but you can see everything's essentially optimized for this so that's utilizing graphql and gatsby's image now let's go ahead and finish up styling this and then passing in the rest of the data so here under img i'm going to start adding the um stock components let's just say product info and then i'm going to have text wrap here and then here i'm going to have i am location which is a react icon then under them i have product title so the product title this is going to be item dot node dot name so again here node name json file this is the name also i think i forgot to add the alt to so let's do um yeah let's do alt equals to item dot node and it should be make sure node alt yeah all it's here and then underneath the text wrap let's pass in a button component so button so not like this and then let's set the two value equal to slash trips and then let's just say item dot node dot button so again button right there item dot node dot button and item again is this will be passing here you want to call this chicken taco or whatever then you'd say chicken taco no but but obviously you want something that makes sense and then i want to change this div that we created originally so you can do command d to highlight both of them press actually go on yeah see now it's highlighted both and let's just call this product card and that should be all of it for that so let's actually show how i think i just scroll this on accidents let me bring this back right here and now let's go ahead and add these let me close my terminals you can see better let's add these to our style components so let's go ahead and start editing this so we have product card next let me just save this you can see all right that's much better so first let's do the product wrapper actually let's let's um do this let's do shift alt down arrow one two three four five and then let's change this to product card this one to product info product or let's see text wrap text wrap here i skip i am located as a rare component and then let's do product title and then button button is already actually gonna erase this one so save this one second we have to save let's see product card doesn't look like i typed this wrong okay we got the d product card here and then let's import the button and then the stock or that stock on the uh react icon so let's say import looks like the button auto import so i'm going to do it mainly and it's from dot slash button and also we have imports i am location which is just the uh just a little icon right here location icon and this is just from react icon slash i am let's save that here and it looks like everything is displaying so all we need to do now is just style this and then we are set so let's go here let's add the product wrapper styles first so here i'm going to go ahead and do display to be grid and i'm going to say grid template columns this one's going to be repeats 4 4 comma 1 fr so save that now and i can see we got a little grid action going right here and then let's do grid gap 10 pixels so now we have some little spacing between them let's do justify items center here and then let's do padding 0 to rem and now let's add our midi query so add media screen and max width of 1200 pixels i want the grid template columns to be one fr one fr so we'll save that here and then let's do command c again paste that down and then when this is let's do 868 i wanted to be one fr which is actually one column so now let's add the product card style so here let's do line height to b2 the width to be 100 let's do height to be 500 pixels let's say position relative border radius to b let's do 10 pixels and let's look at the spell border and then last but not least let's do transition to be 3.2 s ease so i'll save that here and now we got a little little border i can't really see it yet because the um image needs it so let's actually do this so um product image so what i'm actually going to do i forgot to create a product image so let's say cos product img equal to style parentheses img which is the gatsby image and then i'm going to update this img we originally had and just call this product img so i save it here and then we can go inside here and then we can do heights a hundred percent let's do uh max with 100 percent and then let's do position absolutes i'm going to do border dash radius 10 pixels as well and then let's do filter let's do brightness let's do 70 percent and then let's add a transition let's do zero point four s and then we can do like the shortcut cubic bezier however you wanna say it and then just use that first option here and then on hover so and call and hover let's do filter brightness of let's just say 100 so now if i go and hover over the images it has a little brightness a little hover action right there and also you can see everything is rounded too so now let's go here and i think yeah let's actually let me change this to relative it should be relative so let's see you got the product info now so that one's like invisible so let's do display to b flex let's do flex direction column align items flex not bad hold on see flex start and then let's do padding of zero to ram and then add media screen and max width to b 280 pixels and then that can just be padding 0 1 rim so right now you can't really see anything because the images are hovering but essentially we just put in the columns and then just made it start in the beginning and then text wrap so let's say display flex here align item center position absolute and let's do top of 375 pixels so now you can see that it's positioned right here and then for the title let's just do font weights 400 let's do font size one rem and then margin dash left to be 0.5 rep and you can't really see anything yet or this is right here let's see go back to the top yeah so everything looking fine right here and what we need to do actually and this is a cool little trick because that's pretty much the side components but the button you've noticed is still not it's not there so what's happening so what's cool is with stock components you can actually add css directly to these buttons without having to like put it globally like for instance we have like the button.js block here but if you have this reuse like a million times and let's say on one page you want it to be like color yellow but you only have orange and blue on your button it's gonna be a pain to write logic to make it like four or five different colors so here what we can do first is let's add some properties so let's just say prime equals true what happened probably is equal true so let's go down here save that first and then it's orange you can really tell the background but it's there let's make it rounded equals true and then here we can say css so here is a css equals to curly braces and then you do back ticks and then you can type in your css so like say position need to be absolute and i need the top to be 420 pixels and then font size is going to be 14 pixels here now let's go ahead and let me add a heading so right here on the products heading we're going to have this like a passing in dynamically so we're going to say like heading curly brace here and i can pass in all the way at the top on the trips we're gonna say heading here and then i'm gonna save this and let's get rid of this red background so background leave it like this and then the heading is up here it's invisible because now we can go to index.js and on trips we can say heading equals to our favorite destinations save it there and i can see that it passed in here so now this is what we got so far it will hover right here and then you can see we got the buttons and they link to essentially the trips page and this is what we currently have created so far and then when we shrink this this is mobile shrink it down and then go back up and this is what we have going on so now let's go ahead and let's start creating the next section so now let's go and let's go underneath this trip section here and let's go ahead and create a another component so i'm going to go to components right click new file and then i'm going to say test dot js so now here let's just do r a f c e press tab here and then let's just say h1 test module save that here and then let's go to the index.js and let's paste this in here so let's do testimonials command or control space imports and looks let's see fresh okay yeah i forgot i need to do gatsby develop because i stopped my server and then once this loads we can check it back out so now let me go refresh and testimonials perfect okay everything's good so now we're going to utilize graphql again for this but let's just create these components so let's just do import style from style components and then let's see what do we need else we have some real icons too and guess the image so let's just go ahead and import img from gatsby image and then we can import let's see let's do let's save that for later let's just add the cyberpunch for now so in the return let's get rid of this let's do testimonials container this is going to be i'll call this one top line and then this can be like testimonials and then under the top line let's do description description here and then let's just say what people are same and then under description let's have the content wrapper so then we'll have the content wrapper and then we have a column on the left and the column on the right so i'll just call this one column one just so you guys know like what's happening and then in here i'm gonna have the actual testimonial so take out the s here testimonial and then i'm actually going to pass in a react icon so let's do in here let's say i o md [Music] check mark circle outline and then this is just a react icon case like what's this crazy name that's what they have it named as and then we're going to pass h3 so you don't have to have everything as a stock component you can just straight up pass in like regular html tags and i can say like sean michaels and then under here i'll say like a p tag and then say v grade greatest experience of my life you can just do lorium if you don't want to type this you can see like lorium 10 tab it and then you have like filler text but for me let me just paste my um my description in just save time and then let's do command you can see this and then we can just copy and paste this again so we have testimonial again and then i'm just going to paste this under this and then here we can just change the name so this can be like uh just put like sarah came right here and then let me just paste in my description so you can do the lauren all photo text you want to and then this this icon right here is just going to be fa reg light bulb and then under column one i'm gonna create column two and then here's where we're actually gonna pass in the images so for instance let's just put img for now and actually let's just put um just type img for now and then we got to let's save this so we can see all of our errors we can add this so let's do the easiest ones first which are the react icons so we can just say on the top import io md check mark so it autofills here for me from react icon slash io and then let's do import import fa reg lights bulb from react dash icon slash f8 save that there so now we should fix some of these and then we can just go here and just say const and then let's see our first one we have let's do testimonials container equal to style.div with the backticks and then let's see we got shift all down there so we got one top line description content wrapper column one testimonials column two then also gets the image let me say image here so let's actually uh just edit these so we have top line and then we have description and then we got content wrapper and then we got column one then we got testimonial then we got column two and also i think guess the image is not getting around the air let's see did i do it twice oh yeah i was i did twice so save this here okay perfect all right so that's what we got so far and now we need to do is add some style so let's go ahead and i want to add the images first because it's gonna be hard to see the styles if you don't have the uh the thing but let's do just for the actual container let's just start this first so let's just do um like with 100 here and then let's do a background let's say fcscfc let's do color hashtag zero zero padding five ram calc of one hundred per width minus thirteen hundred pixels divided by two and then height equals to a hundred percent stay there for now and then you can see like very slightly backgrounds not like perfectly uh white but obviously you can you can change that doesn't really matter and then let's just edit top line since it's just right there we can add this pretty quick just say the color to hashtag 077bf1 let's do font size of one ram let's do padding dash left of two ram and margin dash bottom of 0.75 rep so we got that there the description we can just edit this one so let's see so first of all the top line let me make that a p tag oh i have it got a p tag here description can also which means there's a p tag here and let's say text align to be start padding dash left to be two ram margin dash bottom to be for ram font size is clamp of 1.5 ram five you put with two rim and then font weight is bold and then for the content wrapper let's do display grid grid template columns 1f4 1fr padding 0 to rem at media screen and max width of 760 pixels and then grid template column one fr so you can see now we don't have images so obviously it's not showing but this is obviously where the images would be and then let's for the column one we can edit this one too so let's say uh display to be grid grid template columns 1fr1fr and then also let's see [Music] testimonials so under here you can say padding dash top one ram padding dash right to rim and then inside we can do the nesting so i can select h3 i want the margin dash bottom to be one rem font size 1.5 rem font style italic so see let's see if the um looks like it didn't testimonial h3 yeah so make sure that um oh yeah that's why i said font size not style so font style there we go and then just p tag let's just make it like a little faded color so hashtag 3b 3b3b and that's what we have here and i might as well add the com2 because um let me show you so let's go to column 2 let's just say display let's just do grid grid template columns 1fr 1fr margin dash top 2 ram grid gap 2 or 10 pixels should be dash and then let's say at media let me close this out screen and max width of 500 pixels and curly braces do grid template columns and let's say one fr and then let's say cons images equals to style of the gatsby image with the backticks and let's just say border radius of 10 pixels and then just set the height to 100 so i just added the uh just these two images here so it's a typical display grid but we need to go here and change this so this needs to be image or images which we named it so here we have to actually map through this so for now let me just uh let's just do images and then let me just close it out for now because nothing's going to show up but here is when we utilize graphql again so now if i go back and let's go to our graphql and if you don't have this link just do uh ow terminal again and 10 you can reach out the server so if you want to just do like control c restart it or if you want to just save time you can just do local hosts and have all this crazy uh you can use the localhost colon8000 slash i'm just going to start graphql and if i delete all this press enter it also leads me to here so again if you don't have that just do command click right there so if you open graphql it's most likely to show your previous query so we can actually just go here let's drag this out and let's just go and see got our queries here let me actually close this out and let's click on explorer and what we want to click on this time isn't so you know we're not going to we're not going to be targeting our json data anymore we're going to go straight through all of our files now the issue is we need the images first so actually that is something we need to drag in so let me just show you again where you can get images so if you just go to pixels that's one website you can just type in like um portrait or yes make sure it's all right portrait here and then you can find a two pictures of people you can make the orientation vertical and they can see there's a bunch of like nice photos of people and like portrait modes like this guy you could use this person and then just go here find two images or you just type in like guy or girl and they'll also show up too but you can see there's like a bunch of images you can find here or we can just go ahead and like do like um you know guy let's see yeah type guy girl et cetera get the point and just pick any of these images like this one would look cool for like um just like a travel site but did i pick ones that have like like people actually looking at the camera so again you can just find us hit there and go through it but i'm gonna go ahead and actually uh go back to my vs code and let me drag in my images really quick so that we can save some time here so let's go ahead and go ahead while i'm doing this find your you just need two images or you can just use your like literal travel pictures too if you don't want to sit there and do that now but i guess all depends on what you're trying to do so here i had actually yeah let's do let's drag these in from assets into the images folder and i'm already gonna save some time i'm just gonna drag in the remaining two images i have for the email just to save some time but all i did was i just found like two images for travel so again you can just use travel again and then just literally like this is like a picture of the ocean so here at testimonial dash one testimonial dash two these are those two you need for now and then these later two will add later but if you wanna save some time and do it now you can find two more images that have essentially a um a travel background technically only need one but i was testing out like two different images for this background but this is just in case you want to do it now but you don't have to worry about that but the thing is now let's refresh and let me see if um let's see if grout grab kio can actually find this and if not we might just have to restart this so let's roll let's go to all files now and then go to edges and then node and then we go try them sharp fluid and then let me click src and then let's hit the play button so now if i drag this out let's shrink this let's see so we have testing 101 test 102 email one two okay so now showing the new images i added if you didn't add the um two other images then you have to worry about this but as long as you have two images here showing testimonial one and two then that's working and now you notice that it has this like uh this air these four errors right here and these are actually we shrink it back one is we have two videos that it's like you just can't read it so what you want to do is you want to make sure this is a cool thing with graphql you can do is uh let's go here if we go back to the top right where we clicked it we can filter so you can click filter here and essentially we can filter for specific things so for me they have two different options they have this one thing let me see if i can find it ext so essentially the extension and then you have these there's like six different options here and gatsby has like a uh docks showing like what exactly these mean but for here they use regex and this is essentially this is just some code so if i type in like slash parentheses jpg then i can do shift this right under the backspace button on my laptop little straight bracket and then we can do parentheses png and they're gonna do straight bracket again and then we can do parentheses j j e p g so now if you understand this is pretty self-explanatory but it's essentially just filtering out just for images with this so hit player here it looks like it's not going to work so let me let me make sure i have everything probably my spacing might have to fix that let's see if that fixes it okay if i extract your jpg so i think i forgot the slash yeah i forgot the slash at the end so let's do slash here and now it looks like it's working so now what's returning is only images that have jpg png or jpeg so i only have jpegs so now you see that original the error with the nulls those are gone and also i don't want to get all these images right i only want these two portraits i have here i don't care about these four up here or like the other image down here so another trick is you can do is go back on the filter here and let's look for the name so names here and if you're probably wondering like how in the world do i know what exactly to click on well that just takes time and takes hours of just messing around graphql and just google searching stack overflowing because first off when you see this you're like oh my gosh it's insane but ideally all you need to know is like what you need to click to get what you need back there's a bunch of other stuff but it's really you don't need to know it unless it's necessary for you for using it but here we can use name and this is just a way you can filter this i'm sure there's other ways but i want to filter and only look for a testimonial one and testimonial two so i see there so we can go to name and then you can do i n essentially think of it as like including and then i'm going to do the array brackets here so actually let me let me press enter so you can see better so in here let me type there and then i do quotes tests demonial dash one comma quotes testimonial dash two i think i forgot the code on here let's see it codes here let's see what happened why is that red oh yeah i need a quote here and then this looks like there's a quote on the outside the array that should be there and also this one shouldn't be there so it should just be in colon array testimonial quotes okay that's one because the one that's called stash two so now if i hit play now you can see we only have two images now so that's perfect so now i'm going to do we can just try to copy this drag this back go to our page and then under the testimonials function inside let's do cons data equal to use static query parentheses graph ql backtick backtick inside here i'm just going to paste this and then i can just delete the query and sometimes for some reason vs code like makes this like invisible but it still works so i don't know why maybe that's just like a bug on my my computer but then we need to do now is just import this uh with graphql as well and then we just need to map through this so now let's scroll down to our column two and then let's just do the brackets and let's say data dot all file dot edges dot map just like we did before originally except this number mapping through us and then we're going to do an arrow function here and then we're just going to pass in so let me bring this images command x paste it in here and then we need to pass in for the parameters let's do image and then key and then here i want to make the key equal to key and then i'm going to say fluid equals to image.node.child image sharp dot fluid curly brace and then we should save that and that should display the images so let's see did i forget oh yeah this should be a parenthesis so instead of curly braces this should be parentheses same thing here save that there and then let's refresh let's actually do um yeah we need to actually go yeah should we find here so let's do ctrl c run gasket develop again and see if that fixes so now let me go here and just refresh and looks like my images aren't showing oh there they are so they are right now they just shrink so i guess that's just like a styling problem but at least you can see our images are here and when i inspect it they are optimized and also just remember i think i added the um i think i added the src to the uh let's go back to the where's the trip section yes i don't think we don't actually need this let me just make sure let's see because i think sp fluid should um yeah we should be fine with that so we don't need that right now so yeah we're gonna go ahead and delete this part here let me control c just to make sure everything is working fine and that should be fine here but we can also check the uh let's see should.json yeah yeah image testimonial we're fine here and then trips and then we can refresh let's see yes images still displaying so that's good to see so i think it's just the css now on the um testimonials image seems like i'm missing something so let me go and find out why the styling isn't doing what i want to see so i figured out the issue was this should be on column one grid template rows so i'll save that there and then this for the gatsby graphql query that should be dot dot gatsby image sharp fluid so save this here and now you can see the images are here and let me shrink it like this and last but not least let's add a custom css of the icon so let's just go to like this bulb under testimonial let's say css equals two curly braces back ticks color hashtag three f f f a eight font size to rem margin dash bottom to be one rim save that there and actually i want this to be on the this one and then i want to change the f8 light bulb to be clear i put this one f 9 b 1 9 b so you can see it looks like this and i just paste this one into this iomd so now we go here so far we have hero little uh product image testimonial trip section and then here's the testimonials right here and then we basically can shrink that you can see it's nice and responsive so there's a simple testimonial section and again just show you inspect gatsby image everything is optimized so now let's go ahead and create the next section so now let's create the stats section or essentially right here like why they should choose us so let's go ahead and go down to components new file and let's just call this one stats.js it can cause wherever you want to but let's just keep it simple now here let's go ahead and let's just do r-a-f-e and then let's go and for this one we could put this in the data file but i also just want to show you you can also keep it in the file too so again there's like 100 million ways you could probably do this actually a couple not 100 but there's a lot of ways you could do this to where you can pass in data map through it but for now let's just do the typical style components for now so let's make sure we import styled i'm sure i spell this right from stock components and then let's return command d to highlight both of them and let's just call this that's container and then we can see let's call this heading why choose us and under the heading we can make a wrapper so let's call it wrapper and then here we'll actually map through some data so we'll just leave that for now and then let's just add in some stuff components just so that the air doesn't show up so let's do cons that's container equal to style.div with some backticks shift all down here to copy one two times let's call this heading and then this one we can name this let's see you should put h1 here and then let's have stats container change this to wrapper all right so for the staff container let's just do just say width of 100 like that and then let's do um background make it white color hashtag zero zero display is flex let's do flex direction column and then let's do justify content content to be center and then padding forum calc 100 or actually parentheses 100 report width minus 1300 pixels divided by two say that for now and right now you can't see anything yet and we actually have to let's import the um stats in the index.js on the pages so just call this stats close it out and then here we got this heading let's edit this let's put uh text align to be start font size clamp 1.5 ram 5 v port width comma 2 rem let's do margin dash bottom to be three rem and then padding zero two yeah zero two rim and then wrapper let's put this one display grid grid template columns repeat and we have four columns so i'm gonna say four comma one fr and then let's say grid gap of 10 pixels and then let's have the media query so add media screen and max dash width of sentence 8 pixels and i just do let me copy this paste and just change this to 1fr and then let me paste this again and just put this at 500 pixels so right now you can't see anything because it's um we haven't had data but let's go ahead and actually let's create that so here let's do this we have some react icons here so let's do import and then we have this icon called gi earth america from react dash icon gi let's do shift down arrow one two three times more let's erase this let's do md airplane mode active and then it's just going to be md then here we'll have md timer actually i could put this in the same thing so we could just do md timer here since they're both from md so let me delete that and then this one will be fa money check that's equal to f a so now we could create a data file in the data but let me just show you this is another way in case you just wanted to see we just do like cons stats data equal to the array then we have the objects and we're gonna have the icon and we're going to pass in the actual icon so we do parentheses and this is a component here you have to do like this and then just pass in gi earth america and i want this to let's start this out let's just do this for now and that's how we do right there and then we have a comma and then title will be over 100 destinations and then we have the esc and let's say travel let's see travel to over 100 unique places and then i can just add a comma here we can just copy and paste this three more times so one two three change this one to just do md airplane let's change this one to md timer and this to fa money check so now let me change this one to one million trips made here just be over one million trips completed last year and let me fix that here this one will just say fastest supports and then we'll do access or support team 24 7 and then here we have best deals and then we got we offer the best prices all right so now if i save this nothing's gonna happen because we didn't do anything with the data but ideally you could we could just you know copy this exact thing put this in a data file just like this export it it's the exact same thing but i just wanted to show you in case you have like little tiny things i'll probably um separate that in a second but for now let's just keep it like this just so you can see it and then in the wrapper go here and then we'll just map through this so let's do curly brace and what do we call this stats data yes that's data so stats data dot map pass in the arrow function and then we have to return and i'm going to return stats box which is another style component and then we have to pass in key of index for this and then we'll have the icon which will just be item dot dot icon and again you have to pass in the parameters icon or my item and index and then here let me just do command shift down or control shift down arrow or action control option shift down there you're saying it wrong and then we can do command d this can be uh title and then we just have to change this to lower case and then here we can do command d again it should be description and then this will just be d-e-s-c d-e-s-c so now all we need to do is just add these to our styles so now let's go down here let's do cons stats box equal to style dot div for the back ticks shift alt down arrow icon title description and actually description i think we can keep it as um let me just keep it but ideally we don't even need to add styles to it but in case you wanted to we can we can add it later but let's just do this so change this to icon change this to title and this one just be description so i save this now and right now we see nothing yet so let's go to statsbox well actually here we go so now all the data we just created mapping through it so now we can just style this so let's do here heights a hundred percent let's do with a hundred percent padding to rem transition zero point three s and then actually let's remove the trend i had a hover effect on it but i took it out so let's take that out icon let's do font size of three round margin dash bottom of one room title we can just do font size of clamp one ram comma 2.5 before height 1.5 rem and then we'll just do margin dash bottom of 0.5 rim and description this is a p tag but uh there's no styling for this i don't have anything but you can obviously go in here and edit that add it whatever you want to if you'd like to not you can just change it to a p tag it's up to you and then let's add the colors separate so you're probably wondering like how do you add a uh a color to this icon if you're mapping through like a data like somebody have 100 icons how did you add specific colors like in the original one like here so this is again we can utilize css so we can just do uh cs eagles curly brace back ticks and we can just say color hashtag zero four seven bf1 so now if i save that this should change this color to blue so let me copy this css paste it into every icon here save it now they're all blue right now so let's change the md to um airplane let's change that one to f3 a8 to e this next one let's do [Music] f34 f 2 e and then for this last one let's just do 3 a f 5 7 6. and now you can see we have all our colors and i think i should have added on the uh let's see title where is it at i should change that to um change it to a p tag shouldn't get div and then we can also i think on the original yeah keep it like this actually yeah did i change font yeah okay this is the original and then let's do here okay yeah so it looks the same so now this is what we've created so far and then shrink it looks like this boom now it's like this and that's how it's like that so now if you wanted to add styling like change this font you know bigger so like font size 1.5 rem you can go ahead do that but again i don't have any font size for this that should i just have that there just so that we don't have the error and that's pretty much how simple it is now you can actually take this data and if you wanted to you can like cut this out create a separate data file in your data folder and then you just have to import this stuff here so let me actually just do this for you so you can see it so just call this that's data.js and then we can just go here command x paste it here make sure we export this and then let's take all of our icons and also pandex that there paste that here we save this here and then let's save this here and then we can do import let's do stats data from dot where is it at dot slash data slash that's data so now let's see react must be in a scope and using jsx so now let's actually do ir and now we have the exact same thing within our stats page except this time it's it's separate so again there's just depending if you're trying to create this from scratch it's probably easier to do it the first way i showed you just you have to sit and go back click it import it go back here and it's just a pain so that's just one way you can go about that and again that's there's so many ways to do this and then we can actually try to control c let's do guess b clean and then i'm going to go ahead and do gatsby develop again just to make sure like if any errors or issues happen that i can tell before i go too far and then that you know what i have is like whole broken website all right so now just go ahead and refresh command shift c check my console no errors so looking nice looking good so far we have this created so we got the hero section the cards trips we got the testimonials and now we got the little data why would they choose us and now let's go ahead and let's do the email little signup form section which is right here below next so let's create the email section right now so i'm gonna go over to components just right click this hit new file and let's just call this email dot js and then here we're going to do r a f c e press tab and let me bring let's go back to the original website here and then let's just say h1 email save this and then let's go to index.js let's pass in email press ctrl space enter is it imported it's imported there save it and then we got email in there so now we can go to email.js so here i'm just going to say import styled from style components and then let's go ahead and i'm going to utilize just a regular image for this because usually gatsby image is really good if it makes sense but there's always cases where it might be overkill or it just might be very difficult to implement so for this sake i'm just going to import the image that we're going to be using on the actual image src tag just like a normal way you import so i'm just going to say imports let me call this like email we call this email bg equal or from dot dot slash assets slash images slash email and i have email too dot jpg so again remember we imported uh images and i was saying how i have uh i also have this folder here so we could do we can actually let's drag these images here so i've got this as part of the original uh gatsby see here assets images and then obviously this we don't really need these images but let's just keep it for now let me delete this folder here this was the default one that comes with it so we don't need that but uh here let's go and all my images i imported two different uh background images i'm going to use so you can if you haven't already go ahead go back to pixels or any website where you can get images and then this is the one i'm using email two is the one i named it and it's just like a background with like a um like a kayak and then we can also let's see yeah we'll be good for now so now let's just add the stock components now so let's go ahead and here it is going to be the email container and then inside of this we're going to have the email content and then here we're going to put in h1 just to um i don't have to make you don't have to make everything inside component but i'm just going to say get access to exclusive offers click that space and then let's have a p tag here and let's just say sign up for our news letter below to get 100 off your first trip and then under the p tag we're going to say form let's just put the action equal to this hashtag for now now this isn't something that's implemented with like backend or receiving anything but it's just there for the ui for now let me just call this form wrap and then inside the form wrap i'll have like a label right here should actually just do normal label and just say for email and then inside the label let's just do inputs type email let's set the placeholder equal to let me close out my window enter your email and then i just send an id to email here and then under the label let's just put the button component so enter and then auto import so let me do um control space press enter here and then we can just say like let's see sign up should work sign up and then we're pretty much good with that part so let's just go ahead and create the actual styling now so let's go here let's do cons email container equal to style.day with the backticks and then here let's see so the way i did this let's actually let me control you let's do the shift alt down arrow again so let's save this really quick so we get the error so we can see what we're missing so we need one two three and then we can change this let's see what we have email content we got email let's see what else is that oh we got form wrap form wrap and i think that should be yeah i should be fine with that so let's do this save it and then obg is going to be undefined but it doesn't matter so now we got that so now i'm going to say background linear gradient parentheses and then inside here i'm saying 180 degrees comma rgba 0 comma zero comma zero comma zero point five and it's gonna be zero percent and i'm gonna do comma and i'm just gonna copy this two more times so after that i'm gonna do it again and then again and then for the next one i want this percentage to be 35 and this last one to be a hundred percent at point one so essentially i want like the top part of this background to be darker just so the text is easier to read and then the bottom's like more more showing just the image and then after this we'll do a comma and then the url we're gonna pass in is gonna be dollar sign curly brace email img which is what we imported up here and called it or actually my email bg and then we're gonna say no dash repeat and then center so we save this here we have now the image as a background and then all we need to do is just say background say say cover heights 450 pixels with 100 ah padding five ram calc 100 if you put a width minus 1300 pixels divided by two let's do color hashtag ffff then let's do display is flex justify content center align items center save this here and notice what we got going on here so now let's do email content and then here we can just say display is flex then we have flex direction column align items center then we have the h1 text align center margin dash bottom one ram font size is clamp one ram five v port width comma three rem and then let's do padding of zero one rim and then under h1 we'll have the p tag i'll just say text align is center font size is clamp of one ram 2.5 width 1.5 ram and then let's just do padding of zero one rem and then margin dash bottom of two riff and then we'll have form the index of 10 and then last but not least let me save this really quick and then the form will just do let's see input i'm going to do curly braces i'm just going to say padding one round by 1.5 ram outline is none with 350 pixels height is 48 pixels border radius is uh 50 pixels then we got border is none and then margin dash rights is one room and then under that we'll do the immediate query so add media screen and max with and that's going to be 768 pixels and then here i'm just going to say display flex i'm going to flex direction is column and then padding zero one round and then under there we'll put input again and we'll just say margin dash bottom one rem with a hundred percent and then margin dash rights of zero so now it doesn't look perfect because we have to add these stars to the button but basically you see this is what we got so far let me shrink it up like this so now we can go and add some more style so for the button right here let's set the i want to save this as a button so this is a cool little thing is you can change the uh the tag so essentially it's originally a link so that it goes to path but this one i want this to be not a link but just like a normal button and then type equals to submit and also for like this as equals you can change it to like anything h1 h2 etc then that's just a cool way to change uh certain things and stop components without having to like manually recreate it and passing it globally so it's pretty cool trick and then let's just set the primary equal to true set round equal to true and then let's set the css equal to curly brace with the back ticks height is going to be 48 pixels and then let's save that for now and i want to change the media query so after the height let's say at media screen and max dash width of 70 pixels and then we're gonna have width of a hundred percent min width would be 350 pixels and then we'll just copy this again and then pretty much we'll just say 250 pixels and that's going to be like 400. so right now this is what we got going on we'll shrink it and this is what we have so far so this really pretty much is the email section right here this one's pretty simple not too difficult to make and then let's go ahead and let's start creating the footer which we have right here so now let me go control b and let's create the footer in the components folder alright so let's go to components new file let's call this one footer.js and the usual rafce press tab and then let's just go ahead and let's add in let's just say h1 footer save it here and instead of passing this into our index.js like we normally do we're actually gonna go to our layout.js and i'm just gonna add this underneath the uh every all the content here and this imports is imported and now every page that has essentially layout like page two etc the ones we create in the future they will always have the content inside the layout.js which would be the header footer and then everything inside of it too so now it's working here so now let me go back to folder let me actually close out all these let's go back to footer here and this one's pretty easy it's just pretty much style components and styling it and ideally if you're making like your own personal site you wouldn't have this many links maybe who knows but if you're making like a bigger site probably but let's just go ahead and just go forward so let's say footer container and that's a footer let's just call this uh footer i actually have to name them out so you can see it put a link to wrapper and i'll just make these like super long descriptive so that you can understand it but if you want to go in your own code and refactor this to make it shorter then feel free to do that let's say footer this would be just the um description with like the logo and everything so i can just say here like explore x and then let's just put paragraph and say we strive to create the best experiences for our customers and then underneath this description we'll have the photo link item so footer link items and then we'll just have the footer link title which is essentially like contact us about us etc and then under here we're going to have let's see we have footer link so these are the individual links now i'm just going to say equals to slash about whatever whatever page you wanted to link to you put that and then you just say like contact and then i'll just copy this down and let me just erase this shorter code and then we can just say here let's just put like supports and then here you can just do this two more times it closes out you can change this one to like destinations and then here we can just pay like sponsorships and now what we can do after that is [Music] so here's the footer links wrapper right so we have descriptions inside of here and then we have the photo links item but now what i want to do is go under the photo links wrapper again and do it again so footer links wrapper and the reason is we're doing essentially a grid system so that's essentially two columns like on the original design these are essentially wrapped once and these are wrapped one so it's essentially desktop it's one two two columns side by side but it looks like it's four individual columns but it's actually just two boxes and then when it shrinks it it just puts them on top of each other that way it's just easier for making it responsive so here and then inside here we can just straight copy the um photo links item stuff here so just copy this paste it once and twice and then you can obviously go ahead and change this to like um just select videos and then social media now i'm just going to copy in my code just so it saves some time and all it is is just updating the um the the actual text inside but you can go in there individually and do that yourself too and just change the text inside here so now this is pretty much all the jsx let's import this styled from style components also we're going to use links let's say imports link from gatsby and then let's say const footer container equal to style.div with the backticks and let's say this for now let's see how many errors pop up okay so we got for the description for the link for the link wrapper photo link items for link title let's see if that does everything watch yes shouldn't be so let's just change these up now so let's do folder dsc and then let's do a footer links wrapper and then let's try let's see folder link items and then here we can change this to for link and let me see if that's all of them save this real quick so following titles still there so now let's do that one too so let's just do this under alt shift down again footer let's see we got footer link title all right so now everything's good now because now we have everything showing up here so now let's add our styles so start this first one say padding five ram calc 100 width minus 110 pixels so i'm making this smaller just because um i like the footer design like that let's say display to be grid grid template columns to be repeat and just say 2 comma 1 fr color 00 background is going to be hashtag f-a-f-a-f-b so now we have some grid action going on here this is what it kind of looks like so these are basically stacked on top so let's do the footer description real quick so let's say padding is going to be zero to rem and then the h1 let's do h1 and let's say margin dash bottom it's going to be three round then the color is going to be hashtag f26 a2e and then underneath that'll be at media screen and the max width it's going to be 400 pixels and then we'll have the padding to be one rim so let's see yeah there we go we got a little change right there and now let's do the um for the links wrapper so essentially display is going to be grid and then grid template columns will be a repeat 2 comma 1 fr and then at media screen and max width going to be 820 pixels and then we're going to say grid template columns of one fr and then under heat here let's do display flex so i'm going to say display flex let me say flex direction is going to be column then we're going to have align items going to be flex start and then we'll set the padding to one round by two ram add media screen and max width of 400 pixels and then i set the padding to one rep and then for the link title we'll just say font size to be 14 pixels and margin dash bottom to be 16 pixels and say that it should change up a little bit and then last but not least let's target the footer link and actually okay so the title it should be in h2 and i believe everything else is divs yeah we're fine with that so this one's going to be a link the gatsby link and then we'll just say text decoration to be none margin dash bottom 2b 0.5 rem font size is going to be 14 pixels color is going to be hashtag 3 d 3 d 4 e i'll have it for e and then and hold on and colon hover is going to be color hashtag f26a2e transition is going to be 0.3s ease out so now we got a little footer and we got a little hover with the color there so that wasn't too bad and again this is just a little template design feel free to refactor the code anyway i named it also i'm sure you could make this until i get array and then like map through and everything but i think it just makes it super easy to just go here and change stuff right there and then you can also utilize this for your own website so if you want to like replace this section with icons instead you can just you know create your own little div here and just replace these with icons and then vice versa etc or whatever you like to do because so far this is what we have created so far so we have almost everything the last thing i want to show you before we get into the fancier things is the sidebars right now the sidebar or ak the menu mobile menu if it drops down be drop down but basically the mobile menu is not created yet so what i want to do is show you guys how to create the mobile menu now you

Channel: Brian Design

Views: 51,038

Keywords: react website, gatsby website, responsive react website, react js, gatsby js, graphql, react website animation, how to build a website with react, react website project, react website tutorial for beginners, react website design, react website using styled components, react website responsive tutorial, gatsby website tutorial, gatsby react website, gatsby graphql, gatsby graphql tutorial, react hooks project, react hooks tutorial, react js website, react js project, animation

Id: smHhNzM5Uo4

Length: 174min 26sec (10466 seconds)

Published: Thu Nov 12 2020