How To Create Full Stack Text to Image Generator AI SaaS App Using React JS | MERN Project

hello and welcome to another exciting

tutorial of great stack in today's video

we are going to build a full stack image

generator AI SAS application using

mongod DB Express react and nodejs so

let's see the project overview that we

are going to create in this tutorial so

this is the homepage where you can see

we have added the navigation bar with

logo and this login button then we have

these text and you can see these

contents are animated here we have this

button to generate the image using the

text prompt if I scroll down here we

have some steps to generate the image

then we have the description and then we

have the customer

testimonials after that we have another

button to generate the image and then we

have this footer so this is the homepage

and if I click here it will open the

price plan page so that user can buy

credits to generate the image after that

here we have the login button so let me

click on this login button so here we

have the option to login on this

application or we can use this sign up

link to open the signup form and user

can create an account on this

application so I already have an account

so I'll click here on login so I have

added the email ID and password and

click on the login button now we are

logged in let me go to

homepage so in this navigation bar you

can see it is displaying my name also hi

Greatest Tag then we have this user icon

and we have the logout button and here

in this navigation bar you can see the

credits left so right now two credits

are left so whenever you will create a

new account you will get five credits so

I have already used this credits to

generate the image so to generate the

image just click on this button

so it will open this page and here we

have the input field and in this input

field you can add any text to generate

the image using the text so in this one

let me add one prompt I will type a 3D

render of a small chibi style tiger in

forest and click on this generate button

so you can see the loading text here and

after completing this loading you will

see a AI generated image so now you can

see the image has been generated we can

also download this image using this

button so let me click here so this

image has been downloaded so our image

has been downloaded that we have

generated using text prompt now let me

generate another image so I'll click on

this button generate another and here

let me add the another prompt

so let me add 3D render of a small chv

style tiger in snow and click on this

generate button now our image has been

generated a tiger in snow and right now

you can see our credit is zero if I try

to create another image let's click on

this button generate another and here if

I type wolf in snow click on generate

button you can see we are getting the

notification no credit back balance and

we are rected to the payment page so now

we can buy more credits to generate more

images so let me choose any of this plan

so let's select the first one it will

give 100 credits we'll click on this

button and here we have added the

reserve pay payment gway so it is

opening this payment page and here we

have to add the card number so let me

add the card number and other details

now we have made the payment

successfully and after making the

payment you can see here we have the

notification createit added and in this

S Bar you can see the credit left 100 so

we have purchased the 100 credit now

again we can generate the image so let's

click on this generate button and here

we will add new prompt so let's add a 3D

tender of a small chibi style wolf in

snow click on generate button and you

can see the text

loading now you can see our image has

been generated so we will create this

full stack text to image generator AI

SAS application using mongod DB Express

react and nodejs step by step but before

we dive in I would like to thank our

video sponsor codex codx enables you to

build and deploy your react application

visually with just a few clicks with

codu you can create a complete react

application from a scratch or import an

existing react project you can also

start with beautiful pre-built templates

provided by codu that comes with many

reusable components making it easy to

build complex UI in less time it

provides visual tools to design Pages

create components and as style them

easily codu also integrates smoothly

with Wix headless services like its

e-commerce service powering over a

million online stores or any other

custom backend service that allows you

to build a fully functional react

application without hassle you can open

and edit code files in your favorite IDE

such as VSS code while previewing

changes in codu in real time plus you

can connect your project to GitHub to

collaborate seamlessly with other

developers to get started with codex

click the link in the description below

now let's start to create our text to

image generator project for that let's

come to desktop screen and here I will

create a folder so let's create a new

folder and I'll write the folder name

imagify that is our project

name now let me open this folder with vs

code editor so right click select open

with

code now our project folder is open in

vs code which is

imagify in this folder we have to create

two folders that will be for front end

and back end so first we will create the

front end so in this one let's create a

new folder and write the folder name

client where we will create the front

end application

now right click on this client folder

and select open in integrated

terminal so you can see in this terminal

we are in the imagify and client folder

now in this client folder we have to

create the react project using wheat

package so just

add npm create wheat at

latest so we have added npm create we at

latest press

enter so it will create a react project

here it is asking for the project name

so just add dot so it will create the

project with the name client press

enter here we will select

react then select

JavaScript after that we have to install

the dependencies for that just add end

PM

install press

enter after completing npm install let

me expand this client folder from the

left sidebar and you can see in this one

we have nodecore modules folder and we

have these

files right so now we have created the

react project to start this project we

will use npm run

Dev so in this terminal we have added

npm run Dev and press

enter so our project is running on this

URL Local Host Port 5173 so just open

this URL in any web

browser so now you can see our basic

react plus wheat project is running in

the web

browser next we have we have to clear

this default

project so let's come back let me hide

this

terminal and in this SRC you will

find app. CSS so right click and select

delete after that we will open

app.jsx just open this one and we will

clear this file and here we will use RAF

C

snipet and press enter so it will create

this functional react

component if this rafc snippet is not

coming for you then you have to install

one extension just go to extensions and

here search for

es7 react

Redux you can see it has 2 million

installs so you have to install this

extension then you can use the ra f c

snipet after that let's go

to index. CSS and we will clear this

file also next just go to

index.

HTML and here you can see we have the

title right so in this one we will

update the website title so it is

imagify Das greatest stack

after adding this if I come back to the

web page here you can see our project is

cleared and in this browser title you

can see imagify Greatest Tag next we

have to update this icon that is the

favicon icon you can see in the browser

tab so to replace this icon we have to

add the images and icons in our project

so let me just come back to the desktop

screen and here I have one folder called

asss you will find this folder download

link in the video description let me

open it so in this one we have some

icons images and one assets. JS file so

let me just copy

everything from

here and open our project

folder in the project folder you can see

we have the client then SRC and in this

one we have the assets so in this assets

just paste all the images icons that we

have just

copied correct now close it and come

back to the vs code so now in the left

side bar you can see we have

the assets folder expand it and in this

assets you can see we have all the icons

correct and in this one we have one

favicon do SVG also so we have to move

this favicon on. SBG we will paste it in

the public folder so let me just come

back to the project folder again and go

to client SRC assets and from here just

find picon SVG it is here just remove it

from

here and uh we will add it in the public

folder in this client folder you can see

public just paste it here and remove

this v.s

V after that if I come back to the VSS

code here you can see we have assets. Js

file also that you will get in the

assets folder so in this one I have

imported all the

images then I have created one object

called assets and using this object I

have exported all the images using this

export keyword so that we can easily use

the images in any component by using

this

object we don't have to add the Importer

statement for each image we will just

use the assets and we will use the image

after that we have the steps data that

we will use on our web page we will

display these data from this aray after

that we have one more aray called

testimonials data so in this are we have

added different object and each object

is representing one testimonial so we

will display these testimonial data on

our web

page after that we have plans here we

will create the price plan page so on

that page we have to display different

plans so here I have added one aray and

in this aray we have three object that

represents three different price plan so

let me just close this and uh close this

assets also and in this public we have

fabicon SVG so in this index.html file

here we have the link tag and in this

link tag we have v.svg

right so instead of this v.svg we will

add favicon do SVG that we have added in

the public folder save the changes come

back to the web page now you can see the

updated icon in this browser title so we

have updated the

favicon after that we have to create the

folder structure for our project for

that just come

back and in the left side

bar here we

have client folder in this client folder

we have SRC now within this SRC we will

create a

folder called

components so so we have created

components folder where we will create

different

components after that in this SRC folder

right click and select new folder and

here we will create a folder called

pages so in this one we will create

different

pages and in this SRC folder let's add

one more new folder and the folder name

is

context in this context folder we will

create a context file where we will

store all the states for this

application so we have created the

folder

structure now after creating the folder

structure we have to add the telin CSS

in this project to add the twiin CSS

just come back to the web browser open a

new tab and here we will search

for V plus tnd CSS

open this first

link and here we have the steps to

install telin CSS in whe project so you

can see the first step create your

project that we have already created the

next step is install telin CSS so here

we have two commands right so let me

just copy it one by one just copy the

first one come back to the VSS

code and just open the terminal

again so here we have the terminal right

so in this terminal we have to add

control C so it will stop the

project now paste the command that we

have just copied npm install and this

one press

enter after that let's copy the second

command and paste it here press

enter after completing it you will see

uh new file in this sidebar you can see

post css. config.js and one more file is

there Telvin config JS it means T.C

config.js

now just come back here and you can see

the third step configure your template

paths for that

just copy this entire code click here to

copy and go to T.C config.js

file so from this left side bar we will

open telin config

JS

and replace the code here just remove

everything from here and paste the code

that we have just copied save the

changes after that you can see the next

step is to add these lines in index. CSS

file so just copy it and and come back

open index. CSS where it is it is here

index. CSS and paste

it after that let's see the next step so

the next step is to start our project

using npm run Dev that's it and now we

can easily use the telin classes in any

HTML

element now let's close it and come back

to the vs code and here we can start our

project

using this terminal but before starting

this project we will install one more

dependencies in this project we have to

create multiple Pages like

homepage and uh price plan page then we

will display the result page so to

create multiple Pages we have to add the

react router so to add the react router

we will add the dependencies called

react router Dom so just add

npm

install

react router

Dom then press

enter and after that we will start our

project using npm run

Dev use this npm run Dev press

enter now again our project is running

on same URL now we will hide this

terminal come back to the web page and

you can see our web page is running and

it is completely

blank next let's see the figma design

what we have to create so let me open

the figma file in the new

tab here you can see we have four pages

in this application let me zoom in so

this is the homepage right in this

homepage we have to create this navig

ation bar with logo these buttons and

these featured text then some small

images then we have these steps how it

works then we have this description area

then we have testimonials and one button

and one footer so this is the homepage

then let's see the other page this is

the result page so that whenever we will

enter any prompt we will see this page

with our AI generated image next we have

to create this price plan page and then

we'll create this login sign up

component correct so let's start with

the first one so to build this homepage

first We'll add the Google font in our

project so that we can use this font

right so let's open a new tab and search

for outfit

font open this website fonts. go

google.com

outfit and just click on this button get

font now you can see this button get

embed code just click

here from here just click on this import

option and you will get this import link

just copy it and uh come back to the vs

code in this vs code just open index.

CSS

file and paste it at the top so we have

added this import statement correct

after that we have to add the font in

all the elements so just add the aster

symbols or start here we will add the

font family and write the font

family outfit that's it so by default

this outfit font will be applied in all

the

elements close it come back to the

browser close this tab also and now

let's start by building this

homepage so let's come

back we will come back to the vs code

editor and uh let's close this file also

and in this Pages folder we will create

three files

right so in this pages right

click and select new file and write the

file

name

home.

jsx the file name should start with the

capital name you can see I'm using

Capital H here we will add

RFC and in this one we will add the text

called

home within this div now let's go to

Pages folder again right click and

select new file here we will add the

file name by

credit do

jsx WR our

AFC here we will

add by

credit now right click on the pages

folder select new file and write the

file name

result do jsx

here we will add

rafc and write the text

here result

page that's it next we have to mount

these pages on app.jsx file so just open

app.jsx and here you can see we have

this div right so inside this div we we

have to add the routing and based on

routing we will display different pages

so for now let me add all the pages just

add opening

Arrow home select this from this

suggestion pages slome so you can see

this home component or home page has

been

imported close this tag now we will add

result select this from the

suggestion it has been imported now we

will add the third

page by

credit so by credit has been imported

save the changes and if I come back to

the web

page and here you can see we have

home result page and Buy credit because

we have mounted all the pages in this

app component correct next we have to

display different pages based on

different route for that we will set up

the react router so to set up the react

router first we will go to main. jsx

file and in this one just remove this a

strict

mode and before this app component let's

write browser router or let me import it

first so here after this react Dom

client let's add a space and here we

will

add import curly

Braes browser

router from react router Dom so we have

imported browser router from react

router Dom now we will use this

browser router before this app component

just add the opening

arrow

and add this tag and close this after

this app component so here we have the

opening tag and this is the closing tag

correct so now we have the support of

browser router in

the complete app component

correct after that let's go to app.js x

file and in this app.jsx file we have to

use the routes and Route so just import

that so here after this import react

let's

add

import

CES

routes comma

route

from react router Dom so we have

imported routes and route now using this

tag we will declare the routing path and

based on different routing path we will

display different pages

so in this div just add a space and here

we will add routes

tag use this routes

tag and move all the pages within this

routes now here just

add route use this route tag and this

route will be self closing like this let

me add a space so you can see clearly we

have added route and in this one we have

to declare the path so just add path and

the path will be slash that will be the

homepage so whenever the user will be at

SL path then we have to display the

homepage so just add element and in this

element just add the curly

bres and provide this home that's it

after that just duplicate this line here

we will add the path that is

result and from here remove this home

and here we will provide this result

page now duplicate this line and here we

will add buy or we can say Buy credit so

here remove this and within this we will

provide this by credit page now you can

see

clearly here we have one routes tag and

within this routes tag we have three

route and in each route we have added

different path this is the Home Path

this is the result and this is by path

here we will display homepage here we

will display result page and here we

will display Buy credit page so save the

changes and let's preview this changes

on web page so just open the web browser

and right now you can see we are at the

Home Path that's why it is displaying

home correct if I change the path so in

this URL if I type class

result so we have added Local Host 5173

SL result press enter now you can see

result page now if I add

Buy in this URL press enter now you can

see buy Creed it so this route is

working

fine correct so now we will start

building our homepage where you can see

home correct so right now it is

displaying home so let me add some cses

for this homepage so let me just come

back and uh here in this this app

component we will add some CSS that will

be applicable for complete application

so in this D let's add the class

name and here we will add the tent

classes now for the entire application

we will provide the padding from x-axis

it means padding left and padding right

so we will add the padding X for this is

for the Mobile screen now for the

smaller screen we will increase the

padding so it is is padding

X10 now for the medium screen we will

further increase the padding so we will

add MD colum padding X and it will be 14

now we will further increase the padding

for larg screen so just add LG and PX

28 that's it next we have to define the

minimum height of the application so

here we will add

Min

H

screen so here we are using these tnd

classes if you don't know about the tnd

I have a dedicated video about tnd where

you can learn the tnd CSS from beginning

I will provide that tutorial Link in the

description after this mean height

screen here we will change the

background color of the application and

in the application we will add the

gradient color in the background so just

add

BG

gradient

and to bottom so just add BG gradient 2

B it means to

bottom and here we have to provide two

color code so let's add the first color

code that is

from till

50 and now we'll add the second color

code with two so

two orange

50 so we have added this first color

code and second color code for the

gradient

background after adding this just come

back to the web page here you can see we

have some color in the background and

this is the gradient color

correct now let's come

back and in this figma design you you

can see here we have the navigation bar

in the homepage also then we have this

navigation bar in the result page also

and then this navigation bar in

this price plan page also so we have to

add the navigation bar in all pages for

that we have to place the navigation bar

in the app component so you can see we

have added

this app component in this app.jsx file

so before this routes we will provide

the navigation bar so that this

navigation bar will be visible in all

pages so first we have to create the

navigation component so here we have the

components folder so right click here

and here we will select new file and

write the file name

navard do

jsx and here we will use

RFC and here let's add the text

navigation bar save the changes and come

back to the

app.jsx and before this routes let's add

Navar select it from the suggestion so

the Navar has been imported correct

close this

tag so we have added this Navar save the

changes come back to the web page and

you can see we have the navigation bar

on homepage correct if I go to other

page

like bu credit here also we can see

navigation bar and then bu credit page

if I go to result page like this here

also you can see the navigation bar and

this result page so we have added this

navigation bar component in all the

pages so next we have to design this

navigation bar so just come back and uh

go to navb bar. jsx file

in this Navar component let me remove

this text and here we have this div So

within this div we have to add One logo

in the left side and we will add some

buttons and text in the right side So

within this div let's add the

image using the IMG tag and in this SRC

we have to add the image so we will get

the image from assets object that is

stored in the assets. JS file so first

we have to import that so here we will

add

import

CES

assets

from double

do/ assets folder assets

file now in this curly assess we can use

assets Dot and we can access any image

using this dot so let's add the image

name

Logo now for this image we have to add

some CSS properties so just add the

class name property and here we will

provide the classes so just add the

width 28 then we will add different

width for small device so just add

SM width

32 after that we'll add different width

for largest screen so just add LG then

width

40 save the changes if I come back to

the web page here you can see we have

this logo right now just come back and

on this image we have to add the click

feature so that whenever we will click

on the logo it will redirect us to the

homepage so to add the click feature

here we will add the link tag provided

by the react router Dom so here just

add opening

Arrow link select this from the

suggestion react router Dom so the link

has been

imported now just close this

tag and move this closing tag after

this IMG so you can see I have wrapped

this IMG tag using this link tag link

opening and Link closing tag in this

link tag we have to provide the two

property and here in this two we will

provide the path so just add forward

slash that will open the

homepage that's it after closing of this

link tag here just add the space and

here we will add the

div and in this div we will add the

content for the right side of the

navigation bar so if I go to the web

page and let's open the figma design

so in this design you can see we have

this navigation bar where you can see

the price and log out button in the

right side but if I go to different page

like this here you can see I have added

different buttons in the navigation bar

which is creit left then name and then

icon and whenever we will hover on this

icon it will display one logout button

so we have different content in the

right side of the navigation bar it is

because suppose user is logged out then

we have to display

these link pricing and login button and

if the user is already logged in then we

will display the users name icon and

available credit that's why we have

added different buttons in the

navigation bar so to display these

information we will create two div so

just come back to the vs code

and within this div let's

add div for the user which is logged out

user and here we will add one more div

this one this is for the logged in user

correct now we have to get to know

whether the user is logged in or logged

out for that here we will create one

state variable so before this return

just

add const

user set

user is equal to user

State and here we will add null so

initialize it with null it means the

user is logged out and when it is true

it means the user is logged in so here

we will add the turn operator so just

add the curly Braes and we'll write

user so if the user is available it

means if it is

true then what will happen we have to

display this

div correct and if the user is not

available it means user is logged out

then we will display this

div

correct so now you can understand the

erary operator if user is available then

the first div will be displayed and if

the user is not available then the

second div will be available so in the

second div we will add the button called

login and in the first div we will add

the details like users name we will

display the credit and we will add the

log out option also correct so now let's

start by adding content in this second

div because right now we have added null

it means the user is logged out so in

this second div we will add one text in

P tag so just add the P tag and here we

will add the text called pricing and

after that we will add the button so in

this button let's add the text

login save the changes come back to the

web

page here you can see we have the

pricing login and this home let me

remove this home

from home. jsx file let's come back and

remove this home and let's come back to

the navb bar. jsx file and we will add

the CSS properties in this first

div so in this first div let's add the

class name property and we have to align

the content side by side so for that we

have to use the flex layout so just

add

Flex item

Center justify

between and we will add the padding in y

AIS now you can see the logo in left

side and these text in the right side

pricing and

login now just come

back and uh here we have this

div correct so in this one we will add

the class name property here also we

will add

Flex I item

Center and we will provide the Gap two

then we will increase the gap for small

device so just add Gap

five now you can see these text are side

by side and here we have the Gap also

next we will add the CSS properties in

this button and let's add the CSS

properties in this pricing also so just

come

back and in this P tag let's add the

class name property and here we will add

the cursor

pointer correct and in this button we

will add the class name property and

here we have to change the background

color so just add

BG Jin

800 so it will be a dark background

color now we will add

the text White

after that we have to add the

padding then padding from five

AIS then we'll add different padding for

smaller

screen

py2 it will be

px2 after that we will add text a

small rounded

full after adding this if I come back to

the page you can see we have some

changes in this button but it is not

looking good so just come

back and uh

here let me add

px10 save the changes and come back to

the web page now this button is looking

good correct now we have to add the

click feature on this pricing link so

just come back and here here we have

this P right so on this one we have to

add the click feature so that whenever

we will click here it will open the

credit page so we have to import the

navigate from react router

Dom so before this return a statement

let's

add

const navigate is equal

to use navigate hook

from react router Dom you can see use

navigate has been imported from react

router Dom and now we can use this

navigate so scroll down and here on this

P tag we will add on click

property and in this onclick just

provide one Arrow

function and here just call the

navigate and in this one we have to

provide the path so just add forward

slash by that is the router path correct

now if I come back to the web page and

click on this pricing you can see it is

opening by credit

right and after that if I click

on Logo it will open the

homepage it's working next we have to

add these content which is createit and

this user name and this icon and we'll

add the log out link whenever we will

hover on this icon and it will be

displayed whenever the user is logged in

so just come back

and here inste of this null we will add

true correct and if I come back you can

see the right side is blank we don't

have anything in the right side so just

come back and here we have this first

div so whenever the user is available

this first di will be displayed so in

this one just add one

button and in this button we will add

the icon so just add the IMG tag and add

the curly Braes and in this curly Braes

we will add

assets dot createit a

star and for this button I mean for this

image we will add the class name so that

we can Define the width so we will

add width

five now after this icon we will add one

text also in this button so we will add

the text called credit

left like this and let me add any value

manually so let's add the credit left

50 correct now come back to the web page

and here you can see we have this icon

and this credit left

50 now just come back and after this

button we will add one text in P tag and

here we will add the users's name so

just add hi Greatest

Tag like this and after this text we

will add one profile icon and whenever

we will hover on that profile icon it

will display the log out button correct

so let's add one

div and in this div we have to add one

image and in this image we will add CES

assets

dot let's write user and after that we

will add class name properties so just

add the class name and here we will

Define the width so the width is 10 then

we will add

the drop

shadow correct and after this image

let's add one

div and here in this div we will add

class name property and this will be

absolute and in the parent div we will

add the class name property and it will

be

relative and on this one we have to add

the H effect also so here just add

group correct now in this div where we

have added the absolute this div will be

hidden by default so just add hidden and

after that it will be visible whenever

we will hover on the parent div so just

add group hover

and it will be block so that it will be

visible

again correct next we have to add the

positions so just add

top Zer then right zero then we will add

the Z 10 so that the Zed index will be

10 after that we have to add the text

color so the text will be black next we

will add

rounded and then we will add the padding

from Top that is

12 and inside this D we will add

the log out link so just add U Li and in

this Li we will add the log out text

like this save the changes come back to

the web page and here you can see we

have

this credit left High greatest stch and

we don't have any icon here so let me

just come

back go to Project folder

SRC assets and uh let me find the icon

so here we have the icon called profile

icon.png

so here we will

use assets

dot profile _ icon save the changes come

back to the web page now you can see

this profile icon also and if i h on it

here we have the log out you can

see when I hover on this profile icon we

are getting one log out link so next we

have to add CSS properties for the

content that we have added in the right

side so just come back here we have this

D that will be displayed whenever the

user is available so in this one just

add the class name property and here we

have to align the content side by side

so just

add flex and text Center then we will

add the Gap so just add the gap Gap two

and we'll increase the gap for smaller

screen so just add Gap

three correct now you can see it is

aligned side by side now just come back

and next we will add the CSS properties

in this button right so here in this

button we will add the class name

property and here let's add the same

thing Flex item

center after that we will add the Gap

two now we have to add the background

color so just

add BG blue

100 after that we have to add the

padding from

xaxis then we will add different padding

for the smaller screen

px6 then we will add the padding from y

AIS

1.5 and we will increase the padding for

a small width so just add

py 3 after that we have to add rounded

full next we will add the hover effect

so just add hover and here we will add a

scale it will

be

one5 then just add transition

all and dation simp

700 after adding this just come back to

the web page you can see this credit

left button is looking good and here we

have over effect also when I move cursor

on this one you can see the zoom in

effect

correct after that we will add the CSS

properties for this P tag so here just

add the class name and in this one we

have to add the text size so the text

will be extra small and for a smaller

screen we will add the text size a small

like

this and now we will add the font weight

so just add font

medium next we have to add the text

color so just add

text Gray

600 save the changes you can see this

text looks

good after that we have to add the C

properties for this textt where we have

added the users's name like I have added

High great stack so for this text just

add CSS properties in this P tag so in

this P just add the class name property

here we will add the same text color

that is here text Gray 600 then we'll

add the max a

small for the Mobile screen size we will

add hidden so it will be

hidden and then we'll add the

pl4 save the

changes now this text size is looking

good next we will add the CSS properties

for the users icon and for the logout

text that is displayed below this users

icon so just come back and here you can

see we have this div where we have added

relative and group and then we have this

image right and then we have this div

where we have added ul and lii so in

this UL we will add class name and for

this UL just add list

none then we'll add the

m0 and

P2 then we'll add background

white after that we'll

add rounded

medium then we'll add the

border and text a

small now in this lii tag we will add

the class name and here we will provide

padding from Y axis then padding from

xaxis then we'll add cursor

pointer and here we'll add the padding

from the right side 10 save the changes

come back to the web page now if I hover

on this profile icon here we have this

log out button correct right now when i

h on this one the entire navigation bar

is moving down so let me fix it here you

can see we have added the incorrect

spelling for absolute so just correct

it so just corrected this absolute now

just come

back now if i h on this one you can see

it will works fine when I H on this user

profile icon here we have the log out

option correct so this information will

be displayed whenever the user is

already logged in so now just come back

and here if I make it

null and save the changes so you can see

it is displaying the login button

correct now instead of adding this state

variable in this navigation bar we will

add it in the context file so that we

can store all our states and functions

in one place so let me just remove it

from here and remove this user State

also right and we will store it in one

store so in

this sidebar we have created one context

folder so in this context folder we will

create a new file file so write the file

name app

context do

jsx in this app context jsx we have to

create the context where we can store

the variables and functions and we can

use these variables and functions in any

component so here we have to add the

import a

statement so just add import

cly

Braes create context from react so we

have imported create context from react

correct Now using this create context we

will create a context variable so just

add

export const app

context equal to create

context now for this cont context file

we will create a context provider

function so just add

const app context

provider equal

to one Aro

function and here we will get the

props now in this one we can declare any

state variables or functions and we can

access it in any component so here let's

declare this

is user state so con user set user user

State null so we have declared it here

now here we will create one variable so

just add const

value equal to it will be one object so

in this one we can pass all

our variables and functions so we will

pass

this user

and set

user correct next we have to return so

just add return statement and in this

one just add app

context it will

be opening Tag app

context and here we will add app

context.

provider so you can see we have added

app context. provider and closing Tag

app context. provider here in this one

we will add value and provide this value

object correct and within this tag just

add curly

veres props do

children correct now what we have to do

we have to export this app context

provider so just copy this one and here

just add

export

default app context provider that's it

so now we have created the context and

from this context we can access the

variables and functions in any

component correct we have already

explained

this we have already explained this

context hook in a dedicated video where

I have explained all the react hooks I

will provide that video link in the

description

now after adding this we will come back

to

the main. jsx file so just

open main. jsx and here we have to add

the app context provider so first we

have to import that so here just add

import app context Provider from Context

folder app context. jsx file so we have

imported It app context provider and

after this browser router we will add

this tag just add app context provider

close this tag and we will move this

closing tag

here after this app component so you can

see what we have in this file first we

have the browser router and in this

browser router we have the app context

provider and in this app context

provider we have the app component now

in this app component we have the

support of this app context provider

right so we can access the context file

in this

app correct now let me remove this a

strict mode from here because we have

already removed

it after that we will come back to the

na. jsx file in this na. jsx file we

need the user so we will get the user

from Context so just add

const cly says

user equal

to use

context let's select this use context

from this suggestion so use context has

been

imported and in this use context we have

to provide the context that we have

created so we have

created app context select this from the

suggestion so this app context has been

imported now we have the user in this

file also and if you want to update the

user so you can go to this app context

and instead of this null we can make it

anything so if I come back to the web

page here we are getting some error so

let's inspect

it and go to console you can see we have

the error the a error occurred in app

context

provider user state is not defined so

let's come back and you can see here we

have

added user state but we have not

imported it right so just

add user State select it from here so

the user state has been imported from

react that's it save the changes again

come back to the web page and now you

can see here we have the navigation bar

with pricing link and login button

because the user is logged out now if I

come back and instead of this null we

will make it

true save the changes and come back to

the web page and you can see now we have

this credit left button then users name

and profile icon with log out link

correct so just come back and again make

it

null later we will connect the back end

so that we will get the status of this

user from our back end here in this navb

bar. jsx file you can see we have added

this button that is for the credit so

whenever we will click on this button it

should open the Buy credit page so here

also we can use the on

click and here just add the Aro

function and in this one use this

navigate and in this one just provide

the path forward

slby the same thing that we have added

here you can see we have added in this P

tag and here also we have added this

same thing correct save the changes and

you can see our navigation bar is

working now we have complete completed

the navigation bar and after completing

the navigation bar let's come back to

the figma design and in this one you can

see below this navigation bar we have

this header

section and in this header you can see

we have this small text with icon then

this welcome text a small description

one button and some

images correct so we have to create this

header section and this header section

will be displayed on

homepage so let's come back to the vs

code

editor

and let's open sideward and in this

sideward here we have the components

folder so in this components folder

right click and select new file and

write the file name header.

jsx here we will use

RFC right

header correct and after that we will

will

open home. jsx file and in this home.

jsx file we have this div and in this

div just add opening

tag header select this one from the

suggestion so the header component has

been imported close this tag save the

changes come back to the web

page here you can see we have the text

called header that is coming from this

component this one right so let me

remove this header and in this one we

have to add the text with one icon so in

this header let's

add one

div and in this one let's add one text

in P

tag let's move it in next

line and in this P we will add the text

so this is the text and after this text

we will add one star icon so just add

the IMG tag and here let's add

the curly bres assets dot start

icon and uh you can see the assets has

been imported correct save the changes

come back to the web page you can see

here we have the text and icon correct

now just come back and here we have the

first div so in this one we will add the

class name so in this one let's add the

Flix layout so just add Flex here we

will add flex and flex column so that it

will be displayed vertically then we

will add justify Center and items

center after that we have to add the

text

Center then margin from y AIS

20 correct now we have this div and in

this D we will add the class name

property and in this one we will add

text color so just add text a stone 500

this is the text color then we'll add

the inline

Flex after that text

Center then we will add the gap of two

then we'll change the background so just

add BG

white next we'll add the padding from x

axis that is six and padding from Y axis

one after that we'll add rounded full

next we'll add the border and then we'll

add the Border colors so just add

border neutral

500 save the changes come back to the

web page now you can see this text and

icons are looking good with this button

style after that we have to add a large

text so just come back and after closing

of this du we will add one title in

H1 so in this H1 tag we will add the

text turn text to image in

seconds so this is the

text you can see this text here correct

now for this title we will add the class

name and we have to increase the size of

this text so just add text 4

XEL after that we will add maximum width

that is 300

pixel then we'll add the different text

size for a smaller

screen then we'll add a small and here

we will

add maximum

width and we will add one custom width

here so let me

add 59 0

pixel correct and now we will add

the margin from the left side and right

side so just add MX

Auto then we will add the margin from

top 10 and text

Center save the changes come back to the

web page you can see this text in the

center and in large size next we have to

change the

color of some portion of this text

correct so just come back and here you

can see we have this text text turn two

and after that we have this image so let

me wrap this image in a span tag so here

just add opening Arrow

span close

it and close this a span tag after this

image

text now for this asan tag we can add

the class name property and here just

add the text color so just add text blue

600 that's it save the changes come back

to the web page and now you can see this

image text is in blue

colored now after this title text we

will add a small description in P tag so

let me just come back and here just

after this H1 let's add a space and and

we will add the P tag in this P tag we

will add one description text so this is

the description and here we will add the

class name also so in this one let me

add the classes we will add the text

Center then we will add the maximum

width and margin X Auto and margin top

five that's it save the changes and now

you can see here we have this

text

correct after this text let's come back

and here we have to display one button

so after this P tag we will add the

button

tag and in this button we will add the

button text that is generate images and

then we'll add the icon also so just add

the IMG tag let me move it in the next

line so it will look good so in this

image tag we have to add

the image so just add SRC

assets dot star

group come back to the web page here you

can see we have this generate image

text then we have these Stars correct so

we have to add the CSS properties for

this

button so let me just come back and uh

in this button let's add the class name

and here we will provide the

text size

for small device so just add text LG

then we'll add the text size then we'll

add the text

white after that we will add the

background so the background will be

black BG

black next we have to add the width

Auto and margin

top8 then we'll add the margin from x

axis that is 12 and padding from y that

is 2.5 then we'll add the flex so that

the icon and button text will be aligned

side by side then item

Center then we will add the gap

of

two then rounded

full that's it save the changes and come

back to the web page

you can see it looks like a button but

now we have to decrease the size of the

star icon so just come back and here we

have the image tag and in this one we'll

add the class name and just provide the

height height six save the

changes now you can see this generate

image button is looking good correct

after that we have to add some more

content so let me just come back to the

Fig design and in this one you can see

after this button we have these images

so we have total six

image correct and then we have one a

small text generated images from imagify

so we have to display six images and

this a small text in this header section

so let me just come back to the vs

code and after this

button let's add space and here we will

add one

div now in this div we have to display

multiple images so we will use one add a

so just add curly

presses add

a six so the added length will be six

then we'll add the

fill and it will be empty string then

we'll use the map

method now in this map

we can add the Aro

function correct and in this parameter

we will take

item and

index correct now in this one we have to

display the image using the IMG tag so

just add the IMG

tag and uh in this image tag we have to

display the images so just add the curly

Braes and here we can

use assets dot sample image 1 like this

and uh for this one we have to add the

key property so just add

key is equal to

index and then we will add the

width

and this width will be after this index

and in this width just add

70 now if I come back to the web page

you can

see we don't have the image here so

let's come back instead of this curly

bres we have to use the small

bracket here also we will add a small

bracket like this correct now just come

back and here you can see we have have

six images that is displayed vertically

correct now just come back and here in

this image tag let's add the class name

so here we will

add rounded then hover so whenever we

will hover on this one it should

increase the size so just add a scale

105 then we will add the

transition all then we will add the

duration 300 then cursor

pointer after that we will add

the max

SM width

10 and now here we have this div also so

in this div we will add the class name

property so that we can align all the

images side by side so in this div we

will add Flex

then Flex wrap then justify Center then

we'll add the margin from top 16 and we

will add the Gap

three now just come back to the web page

and you can see these images are aligned

horizontally correct now here you can

see the same image in all positions

right so now we have two images so I

will display the images in alternate

position first it will display the

sample image 1 then it will display

sample image two then again sample image

1 and Sample image two like that for

that here we will use the Turner

operator so let me add it in new line so

that you can see

clearly here in this SRC we have assets

do sample image 1 correct so instead of

adding this we will use the Turner

operator we will

add index percent

2 if it is zero then what will happen it

will display sample

image

two correct and here we will add colon

then provide assets. sample image 1 so

what is happening here if it is

divisible by two then it will display

sample image 2 and if it is not

divisible by two then it will display

the sample image one that's it save the

changes and come back to the the web

page

again you can see here we have the first

image second image then again first

image second image again first image and

second

image it looks good after this image we

have to display one small text so just

come back and here we have this array

and this div that contains all the

images so after this div let's add one P

tag and in this P tag we will add the

text

generated images from

imagify and in this one also we will add

the classes so just add the class name

property and we'll add margin from

Top text neutral

600 that's it save the changes and come

back to the web

page now you can see very small text

below this image so now we have

completed the header section of our

application

after completing this header section

let's come back to the figma

design and here you can see after this

header we have this content where you

can see the text called how it works and

here we have some steps describe your

vision watch the magic download and

share so these are the steps to generate

the image so next we have to create this

steps components correct so let's come

back to the vs code editor and in this

left side bar we will go to complaints

right click here and select new file and

here we will add the file name steps.

jsx in this one we will add

RFC and it will create this functional

component correct now in this one we

have to add the content from the assets

file you can see assets assets do JS and

in this one you can see we have

added a steps data so this is one aray

and in this aray we

have three

object

correct so we have to display the data

from this steps data

array now just come back and in this

steps. jsx file first in this div we

have to add the

title so here let's add the title in H1

tag and in this title we will add the

text called how it

works now in this H1 we will add the

class name properties so in this one we

have to provide some classes like text 3

XL then we will add

the text size for small screen device

then we'll add the font weight that is

semi bold and we will add the margin

from the

bottom

mb2 after this title there will be one

small text in P tag so here let me add

the

text transform words into a stunning

images and here let's add the class name

and here just add the text

large after that we'll add the text

color so just add text

gray

600 then we will add the margin from the

bottom

mb8 like this so we have added the title

and description in a small P tag after

that we have to add one div so after

this P tag we will add one div and in

this div we have to display the steps

data

so here let's add the curly bres

just add the steps

data select this from the snapit so you

can see the steps data has been imported

from the assets folder assets file so

this is one ad so on this ad we can use

the map method so let's add do

map in this one we have to add the Aro

function so just

add one Arrow function and here we will

use this small bracket

correct now in this parameter we will

add the

item then we will add

index now in this

one let's add one div so it will return

a

div and uh in this div we have to add

one image so just add the

image in this image let's add curly

Braes and H here we will use this

item because each object contains one

property called icon so just add item do

icon after that here let's add

div and in this D we will add the a

steps title and a steps description so

we will add the title in h2 tag so just

add the curly

Braes and here we will add the

item

dot

title after that we will add the P tag

and in this one we will add same

thing and instead of title we will

add

description like this and here we have

this div so in this div just add the key

property and in this key we will add

index like this see save the changes and

next we have to mount this steps

component

in homepage so just

open home and after this header let's

add a steps so a steps component has

been imported close this

tag save the

changes now just come back to the web

page scroll down and here you can see we

have the title how it works then a small

description then we have the icons for

different steps then a steps title

description correct so now we have to

provide the CSS for this element so just

come

back and uh first we have this div so in

this div just add the class name

property and here we have to add

Flex then we will add Flex column so it

will be displayed

vertically after that we'll add items

Center then justify

Center then we will add the margin y 32

correct after that here we have the

title in H1 so in this title we have

already provided the classes and in this

description also then we have the div

that contains a steps so in this div

let's add the class name property and

here we will add a space

y four then we will add the width

full then we will add the maximum

width and after that we will add the

text size so the text will be small

correct next we have this

D for IND individual item right so for

individual item let me add the class

name in this one we will add flex and

item

Center then we will add the gap of

for after that we will add the padding

five then padding x 8 then we will add

the background so BG

white/ 20 so the opacity will be

20% it means the background color

opacity now we'll add the

shadow

medium then we will add the

Border then cursor

pointer and after that we'll add the

hover effect so just add hover and just

add a

scale and in this scale we will add the

custom

value in this square bracket so we will

add

1.02 correct then we'll add the

transition all and duration

300 after that in

this image tag we have to provide the

width so just add the

width

40 then we have

this a small typ title and a small

description so in this h2 tag just add

the class name and here we have to add

the text size and font weight so I will

provide text Excel and font medium now

in this P tag we will add the class name

and here we will just add the text color

so the text color is gray 500 save the

changes and come back to the web

page now you can see these steps are

looking good

and here in these individual steps we

have to add the round corners right so

just come back and uh here in this

D after this duration 300 just

add

rounded

large save the changes and come back to

the web page now you can see these steps

are looking beautiful

correct so after completing this steps

section let me just come back to the

figma design and here you can see we

have the next section that is the

description section where we can add the

title small description and then we have

the content in two columns left and

right side in the left side we will add

the image and in the right side we will

add the description so just come back

and uh in the left side

bar open this SRC folder then right

click on this components folder and here

we will create a new file and write the

file name description.

jsx here just add

rafc and uh in this

one we have to add the

title so in this D we will add the title

in H1 so in this title we will add the

text

called create AI images after that we

will add the text in P tag that is the

small description so here just add the

text like this so in this div we have

added the title and a small description

now let's add some CSS properties so in

this one we will add the class name and

here we will add Flex Flex column item

Center justify

Center like this after that we have to

add the margin from y AIS then we will

add the padding and we will add the

padding X for medium screen size so we

have added

myy P6 then PX

28 after that we have the title and

description so let's add the CSS

properties for this one so in this H1

just add the class name and let's

increase the text

size text 3 XEL then for a small device

we will

add text for

Xcel

then font semi bold then we will add

margin bottom

two after that in this description we

will add class

name and for this one we will add text

Gray

500 and uh in this one we will add the

margin from the bottom

8 like this now save the changes and

after that we have to mount this

description component on homepage so

let's open

home. jsx and after this steps let's

add description component so description

component has been

imported close this tag now just come

back to the web page and if I scroll

this web page here you can see we have

the title create AI images and this a

small description after that we have to

add the content in two columns left and

right side so let's come back

open description. jsx file and after

this P tag let's add a

space here we will add one div and in

this div in the left side we will add

the image using the IMG tag and here

let's add the image from

assets

dot sample image

one after that we will add the class

name also so here for this image let's

provide the class name width

80 for Excel screen size we will add

width

96 after that we will add

rounded it will be

large then we will

add one

div so after this image we have added

one div that will will be displayed in

the right side now in this div we have

to add one text in the S2 tag so just

add S2 and write this text correct and

after this text we will add description

in P tag so let's add the P tag and in

this P we will add the

text correct and after that we'll add

one more text in P tag so just add

another P tag and and paste this

text correct so now we have the image

and text now just come back to the web

page here you can see we have this image

and we have these

text below this image so we have to

align it side by side so let me just

come

back and for this div we will add the

class name so in this div just add the

class name property and here let's

provide flex and Flex

column and GAP

five now we will add the medium a screen

size so for medium a screen size we will

increase the Gap so the Gap will

be

14 after that we will add medium screen

and for this medium screen size we will

add Flex row so that it will be

displayed side by side and for a small

and mile phone screen it will be

displayed

vertically correct after that we have to

add item

Center that's it save the changes and

come back to the web page now you can

see this image in the left side and this

text in the right side correct now just

come back and here we have this div

where we have added the H2 and P so for

this H2 let me add the class name and in

this one we have to increase the text

size so the text size will be 3 XL then

we will add the font medium so that the

font weight will be increased then we

will add the maximum width and after

that we will add margin from bottom

four after that here we have the P tag

also so in this P tag we will add the

class name and in this one we will add

the

text color and margin bottom so the text

color is gray 600 let me add the same

text color in the next

text that is next p tag so just add the

class name and provide this color that's

it now save the changes and come back to

the web page here you can see this text

are looking

good and if I come back to the figma

design you can see it looks

same correct

so now we have completed our description

section also and after this description

we have to display this testimonial

section to create this testimonial

section let me just come back to the vs

code and close this

file and let's open sidebar and in this

competence folder we will create a new

file with the name testim mon.

jsx here we will use rafc

snippit now we have to mount this

testimonials component in the homepage

so just open home. jsx and after this

description just add opening

arrow and

write testimoni

select this from the snapit so the

testimonial component has been imported

close this tag correct so we have

mounted the testimonials in this

homepage after that we will add the

elements in this testimonial component

so in this

one here we have this div and within

this div we have to add the title and

one text so let me just copy the title

from the previous section so let me just

open

description and from

here just copy the class name from the

first

D and paste it in this

one so here we have added Flex Flex

column item Center justify Center and in

this m y we will add

20 then we will add the padding

y

12 and remove this PX

correct after that we have added

this title and description in H1 and P

tag so just copy this one from the

description part and paste it

here

so we have added the H1 and P and in

this one we have to update the text so

first we'll update this title it is

customer testimonials and here we will

add the small text in P tag so we have

updated the text in P tag so here you

can see we have added text 3 XL then

text 4 XEL then font semi bold and

margin bottom two and in this one we

have added text Gray 500 and margin

bottom and we will make it 12 so margin

bottom is

12 after adding this if I come back to

the web page scroll down and and here

you can see customer testimonials and

this a small text after that we have to

display the testimonials in three column

and we have already added the

testimonial data in the assets so if I

open assets folder assets file so in

this one you can see we have one array

called testimonials data and here we

have added the testimonials in each

object so here you can see we have added

the testimonials array and in this array

we have three object that represents

individual testimonial data correct so

we have to use this data to display the

testimonial on our homepage so in this

testimonials. jsx file after this P tag

let's add one

div and for this div let me add the

classes also so just add the class name

property and in this one we will provide

Flex Flex wrap and we will add the gap

of six after that in this div we will

use curly bres and here just

use testimonials data from assets it has

been imported in this one we can use the

map method because it is an array and in

this map method we will add the Aro

function so just

add one Aro function and here we will

use the small bracket now in this

parameter we will add testimonial and

index so this is the individual

testimonial data and this is the index

number now in this we will add one

div and it will return this div and in

this div we have to add the key property

so in this key we will add the index

like this now within this div we have to

display the users image then users's

name then role and we will display the a

star rating then we will display the

testimonial text so we will display that

in one div so just

add div and uh in this div just add the

image and in this SRC just add

testimonial that is the single

testimonial data dot

image so we will get the image and for

this image just add the class name and

here just add rounded full so that it

will be Circle and we will add the width

14 that's it if I save the changes come

back to the web page here you can see we

have three users image because we have

total three testimonial data

right so right now we have just added

the image using this

map right and after this image we have

to add the name so we will display the

name in

H2 so in this H2 just add curly

presses and we will

add testimonial dot name so it will be

the user's name correct after that

duplicate this line

and we will make it

P closing P tag also and here we will

add testimonial.

roll correct and after that we have to

add one div so after this P tag let's

add one div and in this div we have to

add the star rating so let's add one

class name

here and in this class just add Flex

margin bottom

for now we will add one aray so just add

curly

Braes are a and uh in this one we have

to add this

testimonial

dot

Stars Then dot

fill and uh here we will add dot map

here also we will add the Aro

function with a small

bracket and uh in this map parameter we

will add item and uh

index now based on this index we will

display the start icons so in this a

small bracket we will add the IMG

tag and uh here just just add key

property in this key property we will

add

index and after that we have the SRC so

in this SRC just add curlys and we will

provide

assets dot rating

star like

this and after that we have to display

the testimonial text so after closing of

this div here we will add p tag and in

this P tag we have to display the

testimonial text so just copy this one

paste it here and instead of name we

will

add

text

correct now let's come back to the web

page and here you can see we have the

users image name

role a start rating and

this testimonial text so in all

testimonial you can see five star

correct so let me just come

back and uh

open assets and here you can see we have

the STS five five and five in each so

let me add four in this one in the

second one we will add four save the

changes and come back to the web page

now in this one you can see we have four

rest starts in this one we have five and

five correct next we will add the CSS

properties for this component so just

come back

and in this testimonials. jsx we have

one div where we have added all the

testimonials right then we have this div

where we have added the key property

correct so in this one we will add the

class

name let me make it in new line so that

we can see the text clearly so here we

have to add the background color so just

add BG white/

20 after that we'll add the padding 12

then we will

add

rounded it is large then we'll add

shadow shadow it will be

medium after that we will add border and

width so just add the border and the

width will be

80 then we'll add the margin Auto after

that we'll add cursor

pointer next we will add

hover and in this hover we will increase

the size so just add a

scale

1.02 then we'll add the

transition

all correct then we have this div

correct so in in this div we will add

the class name property and in this one

we will provide the flex Flex column and

item

Center like this next we have this image

and in this image we have already added

the class name then we have the title in

H2 so in this H2 we will add the class

name property and here we have to add

the text size font weight and margin

from the top so we will provide text

Excel font semi gold and margin top

three after that we have this B tag

where we have added the role so here

just add the class name property and in

this one we have to change the text

color and we will add the margin from

the bottom so we will add text Gray 500

and margin bottom for correct then we

have this div where we have added the

class name then we have this image for

start

rating then at the end we have this

testimonial text so in this one also we

will add the class name so just add

class name and here we have to add the

text Center then we will add the text

size a small then we will add the text

color so the text color will be gray 600

like this now save the changes and come

back to the web

page here you can see these testimonials

are looking good and here we have some

hover effect

so now we have completed the testimonial

section

also correct after that we will come

back to the figma design and here you

can see after this testimonial we have

to display this title and this

button so for this one we have to create

one component so let me add a new

component in this left side bar we have

have the components folder right click

and select new file and here we will add

the file name generate button.

jsx so we have added generate bn. jsx

because here we will add one button now

we will add RFC

snippet and after that we have to mount

this component in homepage so just open

home. jsx and after this testimonials we

will

add generate BTN so generate BTN

component has been

imported correct after that let's open

generate BTN

component and in this

one here we have to add

one

title So within this D let's add one

title in H1 and in this title we will

add the

text see the magic try now and after

this title we will add one button so

just add the button tag and in this

button we will add generate image text

and after that we will add one icon also

so just add the IMG tag and here in this

SRC we will add curly

Braes then assets

dot star

group correct and in this one we have to

add the height so let's add the class

name property and H six so the height is

six for this star group image after that

here we have this button and H1 tag so

for this H1 let's add the classes so we

will add the class name property and in

this one let me add these classes so for

this title we have provided text 2 XL

then text 3 XL then text 4 XL for

different screen size then margin top

font semi bold text neutral 800 padding

Y6 and padding y 16 correct after that

here we have this button so in this

button also we will add the classes so

here let's add the class name

property and in this class name we will

provide inline Flex items and Center Gap

two padding X12 padding Y3 round it full

then we will add the background color

black text color white then margin Auto

then we will add the hover effect so it

will increase the size whenever we will

hover on the button transition all

duration 500 correct after that here we

have

this div right so in this div also we

will add the class name and in this one

we will add the padding from the bottom

so just add padding bottom 16 and text

Center that's it after adding this let's

come back to the web

page here you can see we have this see

the magic text and this generate images

button correct now let's come back to

the figma design and here you can see

after this section we have the

footer correct

and this footer will be displayed in all

pages so we have to add this footer

component outside of the router so let

me just come back to vs

code and first we will create the footer

component so in the left side bar go to

components folder right click and select

new file and write the file name footer.

jsx

here we will use our

AFC and in this footer

component we have to add the class name

in this

div so in this div we will add the class

name and we will use the flex so that

the content will be aligned side by side

so just add Flex then item Center and

justify

between correct then we will provide the

Gap so the Gap will be

four after that we will add the padding

from y AIS that is three then we will

add the margin from top that is 20

correct now in this footer we will add

the logo in the left side so here just

add the IMG tag and in this one we have

to add the path or we will provide the

logo so just add

assets Dot

logo and for this image we have to

provide the width also so just add the

width and the width is

150 correct and after that we have to

add one text so after this image we will

add one P tag and in this P tag we will

add the copy text so this is the

text copyright greatest T Dev all right

reserved

now after this text we have to add some

links so we will use the div and in this

div we will add images so just add the

IMG tag and for this one we will add cly

bres assets

dot Facebook

icon and for this image we will provide

the width also so just add the width 35

correct now just duplicate it and

instead of Facebook icon we will add

Twitter icon now in the next one we will

add Instagram

icon correct now we have to align these

images side by side so here with this D

we will add the class name and we will

add flex and we will provide the Gap so

the Gap will be

2.5 then we have this P tag correct so

in this P also we will add the class

name and here let's add Flex one so it

will use the entire space available in

the row then we will add the Border

one then we will

add border color so just add

border gray

400 after that we will add adding from

left side so it is for then we will

add text a

small then we will add text color so

just add

text Gray

500 correct and for mobile device it

will be hidden so just add Max

SM it will be

hidden after adding this we have to

mount this footer component in the

app.jsx file so let's open app.jsx in

this one you can see here we have the

routes so after this routes let's add

opening Ado we will use footer and

select this from the snippet so this

footer component has been imported close

this

tag so here you can see we have added

this footer outside of this routes

that's why this footer will be displayed

on all the pages save the changes come

back to the web page scroll down and

here you can see at the bottom we have

this footer so in the left side we have

the image then copyright message and in

the right side we have these icons if I

go to figma design you can see it is

same as this

design here we have to add the vertical

line in the left side as you can see

here correct so let me just come back

and uh we have added it but it is not

visible if I go to footer. jsx you can

see we have added border it will be

border L it means border

left save the changes come

back and it will be border left let me

correct the spelling also it

is border L then border gray padding

left right save the changes and come

back to the web

page now you can see we have a vertical

line before this

text so now we have completed the

homepage of our

application after completing the

homepage next we will create the second

page so let me see this figma design and

you can see here we have the another

page that is the result page so that

whenever people will enter the prompt

then they can see the result image on

this page like this

correct so to create this result page

let me just come back to the VSS

code here we will come to left side word

and in this one we have result. jsx file

so let's open this file result. jsx and

in this one you can see we have this

text called result page and if I come

back to the web browser and in this path

if I type SL

result so it will display the result

page so in this page you can see the

navigation bar and footer it is already

there then we have this text called

result page so we will remove this text

and we will add these content like this

image this loading text this form where

user can enter the prompt and click on

this generate button correct so let's

come back and remove this

one and here in this div let's add one

another

div and within this div we have to add

one class name so let's add class

name and we will add the class name

relative

and within this we will add one

image so add the IMG tag and here we

will provide

the image so just add cly bres

assets

Dot and uh here we will

use sample

image sample image 1 so we have added

this image and in this image we will add

the classes so just add the class name

and for this one let's provide the

maximum

width it is a

small after that we will add the Border

radius so just

add

rounded correct after this image we will

add one asan tag and using this asan we

will display one horizontal line below

the image so let me add the self closing

tag like this now in this one we will

add the class name and here let's

provide absolute so the position will be

absolute then we will add bottom

0 left zero then we will add the height

one after that we will add the

background background blue

500 after that we will add the width

full and then we will add

the

transition

all then we will add the

duration and in the duration we will

add 10

seconds correct if I save the changes

and come back to the web page here you

can see

this image and this horizontal line

correct

now let me just come

back and

uh after this div we will add one text

so just add the P tag and in this text

we will add

the message

loading after adding this text just come

back and here you can see this text

loading below this blue horizontal

line after that we have to add one form

with here we will add the input field

and button so after this P tag and after

this closing div tag here we will add

another

div and we cannot return to div like

this so before this div here let me add

one form tag we will add this form

tag and close this form

here at the end

so we are just returning one form tag

and in this one we have the first

div and now we will create the second

div now in this second div let's add one

input field so just add input the typee

will be

text and after that we will add the

placeholder and in this placeholder let

me add describe what you want to

generate so this is the placeholder text

and after that we'll add the class name

property so let's add the class name and

here we will add the classes so let's

add Flex one background transparent

outline none margin left 8 and Max SM

width 20 correct and after that we have

to add one button so after this input

field we will will add one button

tag and in this button we will add the

text called generate correct and the

button type will be

submit and now in this button we will

add the class name so just add class

name

property and here we have to add the

background then we will add the

padding after that we will add the

padding for small screen device then

padding y then rounded full so we have

added this CSS properties in the button

after that you can see here we have this

input field where we can type anything

and here we have this button

correct next we will add one more thing

in this div we will add the class

name so in this div we will add Flex so

that it will be aligned side by side

after that we will add the width that is

full then we will add the maximum

width

Excel after that we have to add the

background and we will make the text

white so we have added the background

and text

white correct and now then we will add

the padding and margin top and Border

radius so we will

add text a small padding 0.5 margin top

and rounded full after writing this you

can see here we have this input field

with this generate

button now let me just come back and

here you can see we have added the form

tag so in this form also we will add the

class name so in this form tag we will

add the class name and here we have to

provide flex and flex column

then we will add the minimum

height and after that we will add

justify Center and item

Center save the changes come back to the

web page now you can see here we have

this image then this blue horizontal

line then loading and here we have the

input field and generate button correct

next we have to change the color of this

place holder text for that we have to

use a custom class

name in this input field we will add our

own class name so let's add placeholder

color just copy this class name and we

will

open index. CSS file here we will add

this class name and for this class name

we will provide the CSS properties so in

this one we will add the color and font

weight so we have added this color and

this font weight after that let's come

back to the web page page now you can

see the color for this placeholder text

and in this input field we can write

anything like

this after this input field and button

we will add two other buttons that is

generate another and the second button

name is download so just come

back and we will open

result. jsx file and here we have

this closing form tag so before this one

we will add a space and here let's add

one

div and within this div let's add the P

tag and in this one we will add the text

called generate

another duplicate it and in this one we

will add the text

called download

so instead of this P we will use the a

tag so let me just remove it and here we

will add one a tag and the link text is

download correct now let's add the CSS

properties so in this div let's add the

class

name and here let's provide these

classes we will

provide Flex Gap Flex wrap justify

Center text fight text a small then

padding zero then margin top top and

Border radius that is rounded full after

that we'll add the classes in this P tag

so just add the class name and here we

will

provide background transparent border

border 900 text black padding X

padding y rounded full and cursor

pointer after that we will add the class

name in this a tag so

here let's add class name and in this

one just provide

this class name background Jin 900 that

is the background color then padding

from X and padding from y AIS rounded

full cursor pointer correct now whenever

we will click on this link that is

download it should download the image so

here we have to provide the

image and here we have to provide one

more attribute that is download so just

add

download that's it save the changes and

open the web

page here you can see we have generate

another and download button

correct now just come back and uh you

can see here it is displaying this input

field also and this button also so what

we have to do we have to either display

this input field or this button so what

happens whenever we don't have any image

then we will display this input field so

that user can type something and

generate the image and after generating

the image it will hide this input field

and it should display the download

button so that user can download the

generated image or user can click on

this button to generate another

image correct so either we have to

display this one or this one so just

come back and

here before this return

statement let me add some State

variables so first let's add const we

will add image and set image this Setter

function name is set

image and in this one we will add user

state to create the EST State variable

we are using user State and here we will

add the image so just add

assets

dot sample image 1 now instead of using

this assets. sample image 1 in this IMG

tag here we can use this state so simply

add this

image like

this correct

and after that if I scroll down here we

have added the hdf correct so in this

hdf let's add the curly

presses and provide this image state so

that whenever user will click on this

download button it will download this

image because we have added the download

attribute in this a

tag

correct now here we will create another

estate variable so let's add

const and we will add the

name is image loaded and the seter

function name

is set is image

loaded and here we'll add user

State then we'll add the initial value

so initialize it with

false so it means initially the image is

not loaded so when the image is not

loaded then what will happen we have to

display this one we have to display

this input fields that is added in this

div you can see the entire div this div

contains one input field and one button

so this div will be displayed whenever

the image is not loaded so here let's

add we will add the curly braces and

here we will add not

of is image

loaded then we will add the end operator

and here we will provide this

div so what we have to do we have to

just remove this curly Braes from here

and paste it here after this

div so when it is true then only this

will be displayed and come back to the

web page still you can see it is

displayed here because here we have

added not of is image loaded so is image

loaded is false and we are using the not

operator so so it becomes true so if it

is true then this div will be

displayed now we will add condition for

this div so here also we will

add cly bres and here simply add is

image loaded it means the image is

already loaded so in in that case we

will display this div because the image

is already loaded then user can download

the image or user can click on the

button to generate another image so just

move this curlys

here like

this now just come back to the web page

and here you can see we have this input

field and if I change it suppose we make

it

true now you can see what happens here

we have this generate another button and

download button correct that input field

is hidden because the image is already

generated so we can download the image

and if I make it

false then you can see again we have the

input field and we don't have the