Build and Deploy a Modern Landing page for an Ad Agency using React, Tailwind and Framer Motion

By the end of the video, you will be able to create a modern landing page for an ad agency using React JS, tailwind css and animate it using the framer motion library.

At the end of the video we’ll also deploy the code on the web using the Vercel platform.

Links:

Before we begin coding, let’s walk through the entire website.

The website begins with a fixed navigation bar at the top. The logo is on the left corner and on the right corner you see the hamburger icon.

When you click the hamburger icon, a drawer opens up from the top.

It consists of links to the various section.

After the Navbar we have the hero section.

On the left side you see a few profile images of the team member and a large heading text.

Below the text you have a button.

On the right side you can see images of the products used for running the ad campaigns.

After the Hero section we have the about us section. This section consists of 3 images of the key team members along with a paragraph talking about the company and the work ethics.

Next is the services section, which consists of 3 tabs for marketing, campaigns and consulting.

Every tab consists of two parts, a header and paragraph text on the left and an image on the right.

After the services, we have the projects section which highlights the key projects the company has worked on.

In this section you can see the image of the project along with a description and some stats about the projects.

This is followed by the pricing section which consists of 3 package cards. You have the package name along with the pricing and also key points highlighting what’s included in the package.

Next is the team section which displays all the team members profile image working in the company along with their role in the company.

After this we have the testimonials section. Each testimonial has a different colour.

After testimonials, we have the Frequently asked question. In this section we will look at how to build a custom accordion which opens up on clicking the plus icon. If you click a different question, the previous answer closes with a smooth transition.

Next we have the contact us form, in this section you will look at how to create the form in react JS and send emails. For this form we will be making use of the email JS to send emails. We will also be using react hot toast for notification.

Last will be the footer section with a few social icons and copy right text.

Finally we will also deploy this project using Vercel platform.

00:00:00 Introduction
00:02:46 Installation
00:07:07 Navbar
00:19:53 Hero
00:27:45 About
00:31:56 Services
00:38:24 Skills
00:40:57 Projects
00:50:08 Pricing
00:58:39 Team
01:03:09 Testimonials
01:08:33 Faq
01:16:09 Contact
01:36:58 Footer
01:40:35 Framer motion
01:51:29 Deploy

#reactjs #reactjsproject #reactjstutorial #framermotion #tailwindcss #tailwind

[BoluAduloju]

what is the name of your autocomplete tool

[atikalsabbir]

bro i please explan more brifly..i just started but now i feel very complicated here..