00:00:02 To get started developing our amazing JTA landing page, we'll start by setting up our new React application using a build tool called Vite.

00:00:12 Right now, it is the most widely used and the fastest front-end build tool.

00:00:17 So just head over to Vite.dev and click get started.

00:00:21 Very quickly right here, they mentioned that it is indeed called Vite.

00:00:25 and not white, just so we're calling it properly, but what we care about more is how to install it.

00:00:32 So if you scroll down a bit, you can notice that you'll need Node to get it started, and then you can install it through npm.

00:00:39 So just copy this installation command or follow my lead.

00:00:42 Within your code editor, open up your terminal.

00:00:45 If you have already created a folder that you want to put this application within, then you can just say, npm create vit at latest,

00:00:54 and then add the dot slash at the end of it, because that means that it'll install it and create this package right within the current repo.

00:01:01 But if you're just located on desktop or somewhere else, then just remove this dot slash, because then it'll create an additional folder for this application.

00:01:10 Once you do that, just press Enter to run it.

00:01:13 and it'll ask you whether you want to install the Veed installer, and it'll ask you a couple of questions.

00:01:19 In this case, I'll choose React as our framework, and to keep things simple and GSAP focused, I'll proceed with JavaScript,

00:01:26 but again, feel free to use any other variant you'd like.

00:01:29 After you get set up, simply run npm install to install all the necessary dependencies needed to run the app.

00:01:36 This should take just a couple of seconds, and then run npm run dev to spin it up on localhost 5173 and open it up within your browser.

00:01:44 At the start, you should be able to see something like this, just boilerplate code.

00:01:48 But now, let's clean up this project a bit so we can prepare it for our app.

00:01:52 First things first, I will clean the entire source app.jsx.

00:01:58 app.css and all of the assets by right-clicking them and then clicking delete.

00:02:04 I'll also go ahead and remove all the styles from the index.css because we're going to replace them with our custom Tailwind classes soon.

00:02:11 Now, if we want to actually show something on the screen, we have to recreate the app.jsx file because that's our starting point.

00:02:20 And use a command called RAFCE to quickly create a new React arrow function with ES7.

00:02:27 And these React imports are no longer necessary.

00:02:29 If this keyboard shortcut didn't work for you, it might mean that you don't have that extension installed.

00:02:34 So simply head over to the extensions and install React snippets, and then try it one more time.

00:02:39 Now, before we check out this empty app within our browser, let's modify this div to, say, main.

00:02:47 because this is going to be the main point of our application.

00:02:50 Within it, we can then display a div, and within the div, we can display an H1 saying, welcome to the world of GTA and GSAP.

00:03:01 Then, if you go back to the browser...

00:03:03 Oh, and sorry for the flash of the light screen.

00:03:06 If you were in a dark room when watching this, your monitor really shone bright right now.

00:03:10 Let me know down in the comments.

00:03:12 From now on, I'll try to keep everything dark mode so it doesn't look like this.

00:03:16 Still, we can see our piece of text, which means that we are ready to start developing our app.

00:03:21 First, let's focus on adding the most important dependencies that we'll need.

00:03:25 You can see that we're currently running our application in this terminal, so let's go ahead and create a second terminal right here,

00:03:32 which we can use to install additional packages.

00:03:36 I'll run npm install gsap, which is the core library, as well as add gsap forward slash react.

00:03:43 We'll use this, of course, to add the animations to our project.

00:03:47 And let's also install a library called react-responsive, which will help us making sure that those animations look good on all different device sizes.

00:03:55 And just press Enter.

00:03:57 Now that we've got that installed, Within our app.jsx, since it's the main point for all of our pages and components, here you want to import gsap from

00:04:09 gsap as well as import something known as a scroll trigger from gsap forward slash all.

00:04:16 Scroll Trigger is a special G-Sub plugin that lets you animate things based on the scroll position, like pinning, scrubbing,

00:04:24 or triggering.

00:04:25 And it is super flexible.

00:04:27 It'll allow you to create crazy animations with minimal code.

00:04:30 So let's go ahead and watch this quick one-minute trailer from G-Sub themselves.

00:04:43 Yep, all of these are websites.

00:04:51 And specifically, we're looking at different scroll-triggered animations.

00:05:00 Pretty cool, right?

00:05:02 You can move the pages and scroll, move the different sections, and I was just about to say, create parallax effects as well,

00:05:09 where one thing goes on top of the other thing.

00:05:20 I think you get the idea, and if you think about it, the GSAP website we'll create will heavily leverage the scroll trigger plugin.

00:05:28 Now, there's one thing that I want to point your attention to, and that is that GSAP plugins aren't automatically active.

00:05:35 You have to register them, and you can do that with one single line of code.

00:05:39 Just say gsap.registerplugin, and then pass in the plugin you want to register.

00:05:43 You only need to do this once in your entire app, So putting it in the app.jsx file is a great choice.

00:05:49 And now that we've set up GSAP, let's also set up Tailwind.

00:05:53 Tailwind is a utility-first CSS framework packed with utility classes that are going to make the styling of our application much,

00:06:00 much easier.

00:06:01 So click Get Started and just follow the installation.

00:06:05 The first step is to install the necessary packages.

00:06:09 By opening up our terminal and running npm install tailwind-css and add tailwind-css forward slash VEET.

00:06:17 After that, we have to configure the VEET plugin to work with tailwind-css.

00:06:21 So just copy this part right here and head over into the VEET config file.

00:06:26 Instead of overriding it with what I just copied, I will just import that additional plugin called tailwind-css from add tailwind-css VEET and just add

00:06:36 it to the list of plugins.

00:06:38 Perfect.

00:06:39 The next step is to import the Tailwind CSS directives into the CSS file.

00:06:44 So just head over into our index.css and type at import Tailwind CSS.

00:06:52 Now the last remaining thing to do is to test whether Tailwind actually works.

00:06:56 So head over into our app.jsx, apply a new class name to this h1.

00:07:04 And let's do something like text-3xl, and let's give it a color of text-indigo-600.

00:07:12 If you do this and come back, you should be able to see that you now have a large purple text.

00:07:17 Now, to make the styling of our app easier, Tailwind offers something known as utility classes.

00:07:23 So if you head over to index.css file, you can define different font faces right here, or you can even define the entire base theme that allows you to

00:07:34 add your own custom colors, like dash dash color dash pink, for example, and then you can define how that color looks like.

00:07:42 Or you can apply some general styles, like changing the width of the body to be 100%, for example.

00:07:50 and changing the background color to black so we don't get flashed again.

00:07:54 If you've done this properly, you can now make use of this new color by simply saying Text-Pink, because this color will now have been added to your theming

00:08:04 Tailwind system.

00:08:04 So if you get it back, the background will indeed be dark and the text will be pink.

00:08:09 And maybe the most important thing about modifying your Tailwind styles is adding those utility classes I was telling you about.

00:08:16 So you can do something called layer, utilities.

00:08:21 And then within here, you can define new class names.

00:08:24 The ones that you know you'll be using often.

00:08:27 For example, flex-center.

00:08:29 At the same time, you can apply a property of flex, item center, and justify center to really center a div.

00:08:37 So no longer you have to worry about how to do that.

00:08:39 You can do it with just one single style.

00:08:43 Not three.

00:08:45 And throughout this application, there's going to be many of these utility classes that I like to use to make my CSS life easier.

00:08:50 So to make this course fully focused on GSAP and how to create motion within your applications, below this lesson, you'll be able to find a complete index.css

00:09:01 file containing all of these different utility helpers.

00:09:04 This will make the styling of our app easier so we can focus on applying animation.

00:09:08 If you do it and head back, the text should still be pink and you should see a dark background.

00:09:14 And with that in mind, we're very close to finalize the setup of our application.

00:09:19 But one important thing that we're still missing are the assets.

00:09:22 Currently, we just have the Vite logo, but we'll need so many more images to add those amazing animations on them.

00:09:29 So delete this current public folder, because we'll drag and drop the new one.

00:09:34 And which assets will this new folder contain?

00:09:37 Well, they'll be coming directly from the GTA 6's landing page.

00:09:41 So all the rights still, of course, belong to them.

00:09:43 We're just recreating this amazing website they've created.

00:09:47 I took the time to compile all of these assets and prepare them for you within the public zipped folder right below this lesson.

00:09:54 You can find them within a G drive or just a zip down below.

00:09:57 Just download them, unzip them, and drag and drop them right within your code.

00:10:02 Choose copy folder.

00:10:04 And here you'll notice that we have all of the different fonts, images, and videos that we're going to use and animate throughout our application.

00:10:11 So we're done with the setup and immediately in the next lesson, we'll start working on the hero section.

00:10:17 But before we do that, I really want to make sure that you get the most out of this course.

00:10:22 So we're not going to joke around and we're going to use Git and GitHub right from the start.

00:10:27 So head over to github.com forward slash new, and it'll bring you to this form where you can create a new repo.

00:10:33 Choose your profile and then just enter the repository name.

00:10:37 I'll do something like jsmgta6 landing page.

00:10:43 You can skip the description.

00:10:44 Visibility can remain as it is.

00:10:46 And I'll just click create repo.

00:10:48 As soon as you have it here, you'll get some steps you need in order to create it.

00:10:52 Let's just copy the longest one and we'll type out the rest manually.

00:10:55 So open up your terminal.

00:10:58 And say git init, which will initialize a new empty git repo in your folder.

00:11:05 Then type git add dot to add all of the files you have added.

00:11:09 Git commit dash M initial commit, or we can try being very descriptive from the start.

00:11:15 So I'll say clean up the boilerplate, add the assets and set up the dependencies.

00:11:24 And then let's change the branch name over to main by saying git branch dash capital M main.

00:11:31 Then you can paste what you just copied, git remote add origin to your origin URL.

00:11:37 And finally, git push dash u origin main, which will push all the changes to your repo.

00:11:44 It might take some time because we added the assets.

00:11:46 In the future, it'll be faster.

00:11:49 So now, if you head back over here and reload, you can see that we have the starting files.

00:11:55 And I'll always urge you to push after each lesson so that you can easily get back and see all of your previous commits and what you've done in each one.

00:12:03 Trust me, when companies browse your Githubs, they really want to see that you're pushing consistently and that your commit messages are well structured.

00:12:12 Not only that.

00:12:12 but you'll be bumping up your GitHub contribution graph, which is always a good thing to see.

00:12:17 And I'll be pushing alongside you as well, which means that for every lesson, you'll be able to see exactly which changes we have implemented so that if

00:12:26 you're stuck or if there's some issues, you can just go ahead and check out the commits for that lesson to see exactly what changed then.

00:12:34 Here we have a bit more files since we just set everything up, but in the future, you'll be able to see only the changes that we implemented for that lesson.

00:12:43 So great job on the setup.

00:12:45 In the next lesson, let's focus immediately on developing this beautiful hero section, which on its own seems just like a nice background photo,

00:12:54 but with this animation that they have added, let's be honest, really sells out the entire page.