Hi everyone, welcome back to the

channel. It's Le here. In today video,

we will be building a complete

production ready fitness website called

Flex Flow using NextJS 15 with a router

and tailwind CSS. Let's just enjoy this

project designed to help you understand

how professional component are building

from scratch to finished using modern

tool and best practices. Over the next

few hours, we will create a fully

responsive, beautiful design website

that includes a dynamic homepage with

different functionality like a banner,

special programs, pricing and everything

including main homepage. Next is to be

about us page. About us page is that

tell the brand story of this flex flow.

Next move into program page. What is

program page? The program pages with

interactive tab functionality and all

the program listed. Now next is to be

blog page. What is inside of blog page?

The blog pages include all the blog

related to this flex flow website with

category filters and search. So last one

is contact us page. In contact us page

working with forms and FAQs. Each page

is built with modular and reusable

component making it easy to maintain and

expand. We will go through the full

folder structure step by step. Learning

how to organize your project using the

app router. How to set up your EOS

animation in your main page. how the

implementation this OS animation in

whole website and how to create a custom

shared scen UI component and how to

install all the shared sen UI library in

your project and how to use reusable

component in your project like a button

cord tabs input etc. You will also see

how to keep your code clean and neat

accessible and optimized for performing

using NexS best practices and tailwind

CSS utilities. By the end of this video,

you will have a complete understanding

of how to plan, structure, and how to

deploy a modern fitness website ready

for your world projects. So, take your

time, follow along, and by the end, you

will have something you can be proud to

showcase in your portfolio. Let's begin

building Flex Flow, your complete NexJS

Intellent CSS project. Let's dive into

code and see the demo of this project.

Heat. Heat.

Heat. Heat.

Heat. Heat.

Heat. Heat.

Heat. Heat.

Hey,

heat. Hey.

Heat. Heat.

Heat. Heat.

Heat. Heat.

Heat. Heat.

Heat. Hey, Heat.

Heat. Heat.

Heat. Heat.

Heat.

Heat.

Heat. Heat.

Heat. Heat.

Heat.

Heat.

Heat.

Heat.

Uh you can see in this project layout

production everything in in intro and

now it's time to uh build this project

from scratch. Uh now I'm collecting my

all asset in my system and now just need

to make this code and uh now I'm going

to my chrome uh chrome and code editor

and make this project from scratch. So

I'm going to my chrome editor. Here's my

chrome browser and this is a website.

This is a complete website. Flex name is

flex go. This is just template complete

all landing page you can see. And now

it's time to uh build this complete uh

uh this project from scratch. Uh and you

can see this is all project. This is

actually this is a complete landing page

screenshot. You can see this is complete

landing page. Uh my target is uh scrap

all all the all this landing page into

code. So uh I'm open my code editor.

Here's my code editor. I am opening

already common folder. Now uh uh I am

open the new folder. So click on open

folder and go. Here's my already YouTube

project folder. In this project, I

create a new folder name is flex

blow maybe

text flow

flex flow website flex flow and open up.

So maybe this flex flow

folder is open right now. And in this

folder uh first I need to install the

next JS basic setup. So how to do? So in

chrome I write uh next. So the next

gs.org

going to this website this official

nextjs website. You can see here's a uh

run command project creating command

name is npx setting create next step and

add latest. So copy this command. Simple

click on click on here simple icon

button. Come to my again code editor.

Open the terminal.

Now first check.

So copy the command paste here. Simple

and pixelate. Next test enter it.

They need some ask some information for

your project. So I think I need dot dot

is not temporarily. So how to do? So

space currently in my app TypeScript no.

Would you like to use TypeScript? No. Uh

they asking about no. And would you like

to use TC question? Yes. Would you like

to use code inside Src directory? No. I

use app directory. App it means app

router. So let's enter it. And would you

like to use app router? Yes, of course.

Command it. Yes. Uh will you use turbo

effect? Turbo effect. Yes. Command it.

Uh will you like to customize? No. No.

And this is so basic installation in

initialize project with template. This

is rect u what they install the

dependencies. Rect reactto and next. and

some more installation dependencies like

uh div dependencies like t CSS t CSS

post CSS or you could some more

dependencies

you can see here is some project

and uh

so wait a second now maybe project run

successfully. So first I write the

command name is clear to clear the all

terminal. Now I'm going to the here and

select all and

select all

like this

and come to outside of this main folder.

Now delete this my app. Don't need this.

Now this is a complete NexJS basic setup

project basic template. So let's say

I'll run the main uh show the list of

commands. So how to do write simple

write a ls on your terminal show of list

how many files and folder in this main

folder you can see here main of read me

and all of these folder. So again write

a clear command and now it's time to run

this in next JS. So how to do write npm

run div in terminal and start with turbo

pack and next next step and you see this

at if you have if you run this local you

can see this local 3000 and now this you

can see here GTP and when I click on

this uh link they redirect to open in

browser with local 3000

now they reload compile and this server.

Now you can see here a basic NexJS setup

installed right now. So come to my code

editor again. This here is a main app

directory in include page.js where all

the main code run

and here's a layout they manage all the

font families and main CSS and uh the

root layout. Now it's time to again two

in uh two things installed. One thing is

next install and automatically with the

help of next uh install the tunes. Now

it's time to install

uh the shares UI because the shares is a

popular uh component library and

beautiful component library. Uh I

already make a course on this library.

You visit my YouTube channel and watch

the complete charts in your course. And

you can see here this is a complete

landing page. In this all landing page

you can see lot of the component and uh

I think I need to install this uh shared

change component in my this folder to

install the shared scen component and

using this my project. How to do simple

you write a shen UI on Google.

Share

cn UI on Google.

Click on the first website. You can

redirect here. And now and at the top

you click on simple doc

link. You you direct your to button doc

page. And here's a doc complete

installation for uh all framework. So

pick your framework. What is your

framework? I'm currently uh using this

next JS framework. So click on simple

next.js.

when you click on next you should see

this all next document and

configuration. So uh they ask you uh so

all the command and everything. So first

you u if you create already project

maybe already you need create already

next project. So simple you copy this

command use this yon

bun npm if you are using npm. I'm

currently using npm. So simple click on

use from them and copy the clipboard.

Copy the command. This simple if you

copy this Ctrl C directly copy this and

come to again uh code editor. Open the

terminal again. Uh one more terminal.

And now paste this command. when you

enter it here and you see the options

basic option like uh which color will

you like to use a base color I'm using

neutral maybe best uh still uh slate

maybe neutral is best and they create

component js components js file in your

maybe app directory and app directory

not main directory you can see Here this

define some syntax like uh how to CSS

for global dot CSS because the global

dot CSS is a main base color is this CSS

variant and uh you can see here this is

automatically when you install the

shared CN UI they provide automatically

icon library installation in your this

all

project because Luc C is a Beautiful

icon library. I used previous around one

6 month to one year ago. This uh use

this library icon library. Beautiful

icon library. I use this in lot of

project. You can see and visit my

YouTube channel and

beautiful library.

Now this can based in component.json

JSON file and in your app directory they

create not currently create a component

folder uh but later and they create one

more folder is name is lip and they made

a utilities dojs and define the some

talent mar configuration. So again go

back to global dot CSS then they add

some

uh theme and initialization custom

variant currently I don't need of this

custom variant

just need a root doc and basic style

and again now it's time to uh install

this all nextjs

sorry install this shared chain UI in

your next project now next step is go to

again and add the some uh sh UI basics

change UI component like a button. So

copy this command. You can see here is

here is a add component button command.

Simple. I copy this and come to my code

editor and paste here again. They maybe

ask you some questions.

Now you can see here automatically

component component folder and in

component folder inside one more folder

name is UI inside create one button gsx

code for you can see here and I need

some more components like a

card and like a maybe card and uh

cut I think card. Card I need a card.

So simple. There it is. And clear. You

can see now card button is card

components is start. If you visit this

uh component section here is the

component. This is a component section

will be lot of component inside this

shar UI. All of these carousel code,

calendar chart collapse command lot

of the lot of component. Um I

in my share UI course I cover all the

components

uh cover all the components cover all

the blocks cover all the charts cover

all the theme cover color cover all the

colors everything of the shared chain u

cover I cover in my shar UI uh course.

Uh if you want to learn this all of the

all of information all of syntax

everything you visit uh you watch my J

scene course hope you enjoy and learn

something about sh.

So you can see here if I reload this

simple this show because some maybe

configuration issue

if I reload this and

maybe this UI okay

theme maybe theme why theme.

Okay.

Okay. Now what is next step after this?

So this is a basic skeleton ready right

now for you. Now come to my this all

landing page and some basic

configuration install and one more thing

I install here. This is you initialize

this basic setup. So I'm going to get

and

go to this and

click on

create new repo

name with the flex

flow.

Flex I forgot about name is flex flow.

Okay. Flex flow.

Flex flow

and simple this. Copy here. Paste it in

description private and uh create the

repository.

Now simple copy this

URL. Come to my code editor. Open your

terminal. Now it's time to this basic

installation and code push on this uh

main GitHub repo. How to do? First uh

write the command in terminal name is

get in it to initialize this project.

Again uh write the command get add and

space after split at one dot it means

you add the all files. After that you

write the commit. What is this mean?

what you do uh identify Gab this is

files and folder in commit.

So how to do the get your comment - m

and this

bas

set up

next

next

CSS

and

and UI

after that maybe clear the terminal now

it's time to connect this um folder into

GitHub uh maybe remotely to how to do so

write a command name is get aren remote

region

paste the URL.

So again get

remote add orig

maybe this good. Now clear again

terminal.

Now push this. So how to do simple write

get. So what you write in your terminal?

So simple you write get push of get push

and one more thing in your terminal. Uh

add hyphen u. After that you write the

origin in your terminal.

This is the push command. Basically this

is the main command when you basic

in initialize code on your GitHub. After

that uh when you again something some

change in the code and again push simple

you you write a push in in start in in

basic when you push the code in gut you

need to write this get push up new

region and after that write a master

this is mean your master branch. So

simple this and then you your code into

push in push in this repo with in master

branch

I check this how to check again if I

reload this project if reload this

browser and you can see basic uh basic

code

from my VS code into my GitHub account

post. Okay, you can see here

you can see here what I push basic setup

with nextj and next year tences and

shares shares in UI. This is a basic

path uh you follow and push your

initialize code into GitHub and when you

when I change something and again I

write this this command to push my

updated code into in my in my GitHub

rep.

So bas basic in initialization done. Now

what is what is next step? You can see

here the basic initialization done. So

now it's time to build this all code. So

how to build uh I I collect some assets

from web find the similar I can search

the gym bodies and all of these flags.

How to do maybe signature loss and these

kind of pictures. Uh I collect in my

desktop folder. Come to my desktop

folder. Maybe you watch fitness project

website. No. No. This. No. Done. No. No.

No. Coding resources. This is maybe this

one. Yeah. This is this is this is maybe

this is so what I do. So I think uh I

open this copy this all file

and I go to public folder and create

uh maybe

flex

flex flow

imgs

maybe acids is good word asset acid

assets is good. Maybe click on asset and

in asset I paste this.

You can see all the images come.

I installed this this this type of

images from the web and you can see

some coaches images some you can see and

some handsome man and body builder of

this woman.

Okay. Now I what I do so some asset

collect and download install in this

repo. Now

again uh this is a project. Now main

ideas how to build this. So first uh I

need to

see this project and see the layout and

then build this code step by step. So

first I see this this is a napper and

napper. So first make this never.

So how to make come to my code editor

again in app folder make a one folder

name is component in component I store

all of the main component in this file.

So what is the write of name c

o n ts components

and inside the component uh I I I'm

currently making header. So I write the

name is header

header dot jsx

first in this m. Now I am going to uh

write this code u write this type of

napper and uh how to make this uh tes

provide us some basic uh navier

structure. Uh I can show you what is

this. So write a Google write a Google

uh in search bar write a t CSS

header.

This is a tail header website. You can

see this is a basic skeleton made of the

navar and you write uh your left is logo

and your right is maybe you add what

they pro what type of the framework to

the react framework

and simple

go copy this code and come to

auditor paste this code in this file.

Okay. Now they

search here. Sorry

maybe some first you rename this into

header and then do not need this type of

product and call to action button.

Remove this. They install they set up

some basic extra information. I don't

need this type of information. Uh I

remove this.

Maybe this one.

call to action pop up

group simple this and

maybe something clear.

Now it's time to copy this header and

your layout. You add this header at

here. So how to do add the bracket and

header and import from this file and

close this again my v terminal install.

If I open the website you you

see the errors. So this is a error maybe

node modules error they ask you uh not

install this library headless UI in your

packet.json and node metals in this and

here. So how to do uh if so simple

terminal and write the npm I after that

I write the headless UI command

and also uh write the headless icon.

Okay, these two uh if I install this

command and again open this uh reload

and open this again browser and you see

this error this is another uh react icon

already not found again you download

this. So uh initially installed both. So

I enter it game install wait seconds.

Okay both are maybe installed right now.

If I again reload this products is not

defined. So uh where is the products?

Maybe in go to header. Maybe in this

is not so close this

close

again. Maybe issue is solved. Now you

can see here's a beautiful nav show. Now

what what I need? I need to fix some

basic style.

Uh

so how to do? So go back to here and

close this dialog box. And you can see

here's MX use. But uh

uh maybe this one is good and uh maybe

add the container

container at top.

Maybe if I remove this MX0 maybe don't

need need or not need it. So now you can

see this is actual complete

complete layout. I show you how to press

the on

uh maybe this is your original laptop

screen.

This is

maybe responsive the

maybe this one.

This is a big laptop settings. So start

from here and here. Now this is a

complete layout.

Maybe you're now in basic navar install

code install. Now you need to change

this code in based on this layout. So

first I need to

add logo. So how to do

this is are currently in two variants

black and uh green. So combination is

currently black and green. So I try to

change the background white and into

black. Let's see. So what I do open

first open the canva.

Here's

my logo maker

project.

So I think I duplicate this

and uh what is the name? Text flow.

Okay.

low and I think I need a gym body icon.

So

find some free

This maybe

this is good

again. I think this look like that.

This is not

Go to this and

hold black and what's the basic color.

Now go to this and

Copy the color. And

I have one more extension. This

you can see here is

inspected.

So simple. Uh go here and

rename this into

now. Now they look good. What I do

I take a screenshot of this

and

close down. Close down.

And this a screenshot.

Copy this. Right.

this into public folder. In public

folder, this is a logo. I rename this

so

name logo

and I am going to here and open this and

remove this tag in and replace with main

image from next

image and close close this tag inside I

am add this uh attribute name is src and

in src I add this simple

logo your company name replace the name

with text flow and some admin bit and

now again if I open this

you can see here is a flexo icon coming

soon so I think I just wid into 240

pixel Now this look this a beautiful

flex flow

uh icon

maybe in image flex floor I think uh I

add the just phone family.

So I try to add just font in this layout

file. So how to add this? I import from

the Google font simple and now my uh

make a variable. So now now I'm to

target this as a like jaws dot maybe

class name. Now check this and maybe

this is working for me in this project.

Um if I reload this font and you can see

this is a beautiful

font fam font

setup right now just so now uh what I do

now maybe logo is good now I need to

improve my uh main menu then another s

setup in header so first open this this

up my view button open menu uh open the

popover group. In popover group, first

you replace a tag to link tag. Maybe a a

tag is in HTML and you can replace this

with uh link tag. Next link tag. This is

next link tag. Now this is replaced

right now. And um

again I come again and now what is next?

After this, I think I need to be a font

not semi bold. Maybe I think normal is

best for me because 400 weight normal is

not good. Maybe I think I try uh medium.

Medium is maybe 500. Now medium is best

for me. Now this is best. Maybe I think

I need to

gain my font size into MD or

now better. So after that uh maybe I

think I am change my font families home.

What is this program?

This is program. Okay. Okay. Okay.

Okay. Here. So I think about about is

good. So move this and about us. P O

programs program maybe program. Yes.

Program. Okay.

Program blog and contact. So I think I

need to be write a blog and uh duplicate

this one and rewrite this as a contact.

So now maybe this is better

better for me here and now this is see

this blog about about us not

simply about now check this is good

program

not programs I think programs

okay now this is good after that add one

more button is get started so go to this

section uh replace again in with the

next link In this you can add the your

uh button from

this one and uh add a

get stred

started.

Now you can see this is a get started

button right now for you.

Now maybe this is good for you. And I

came here again and uh maybe

go to global CSS global global where the

global global I have found where is the

global CSS where the primary primary

primary primary this is a primary color.

I think I need to be uh uh green. So how

to do color? I have one

vector

and just

maybe color picker.

Remove the inspector. I

this and this. This is not working. So I

think color the color.

This one is good. Copy this

and come to here.

Paste this color. And let's see if I

reload this.

Primary is not working. So why primary

is not working? Go to maybe

this one. Base color is neutral. Go to

global and which is a primary BM

primary primary primary primary

at a top. First go to color sidebar.

This is a color sidebar. This is a

war primary

maybe in root. I think I need to be in

root.

I think I need add this in at root level

replace this and let's see again come

and now you can see color is changed

right now

and uh if I go to this button component

where is the button component go to top

and go to button and uh color text

primary

EG primary text primary foreign

maybe this is text primary foreign is

good

if I remove this. So white is maybe

good.

Now it is good

size default.

So I think go to button

and add the

size

LG.

What is this? Okay.

Size LG is good. I think now they look

better better

again.

Not text size is not good. So I think go

back here and where the text size

maybe text

to MD. Maybe MD MD is good.

Okay, now text is MD. Now they look

good.

This is a basics initialization. Okay,

after that now maybe school looking good

and uh beautiful. Now it's time to

add some hover effect under in

bottom of this link. So how to how can I

oh how can I do? So first add the

let's try this

and PB maybe PB to try BB2

at hover.

This is not good. And the line is not

working good. Employ MB.

Add a line height.

line offset is equal to four. Oh, okay.

Offset is four. This this class is good.

Text and a line offset is four. So, I

think I I tried six. This is new CSS.

Now, they look much match. converted

text.

One more thing is under line

text primary. Let's try this. Put this

now. They look much better. Can see

here.

But try to on hover over

I think

our wait a second I search on Google

signs

intell

Uh under line. Can I the line color?

Can I change

uh under

line? Can I change a line?

color in

CSS

decoration red. Maybe this one.

Try this

decoration. Possible change. Maybe

try to hover decoration primary

key.

Wow amazing.

It's now I think uh I copy this and

paste

paste

here

this and paste on all of the links and

let's see how they look. If I re

program

contact us. So in every show uh the

underline with color on a hover.

They look beautiful.

Time to uh

maybe I think uh they look much better.

The

on transition effect add some

how can we do this?

So

when hover right a hover just write a

hover and transition

transition all

I think

can Okay.

Our duration

duration is equal to maybe 300. Let's

see.

You can see now they

they animate a little bit.

Wait a second. I show you one is hover

initially black and when some in some

second they change the underlying color.

Good. So after that maybe uh build

successfully. Now turn into uh build

this main hero section

all page. Now it's time to build this uh

complete hero section. So this is the

home section background. You can see the

text

text flow in

left side some text and button and

maybe add counter

in left side some card

and low effect on body bottom bottom is

uh maybe some company's

name.

So first

go to here and wait a second. So initial

changes post to push on GitHub.

So generate the commit with AI and click

on commit

and push to GitHub.

Now it's time to

fill this fill this hero section. So

what maybe file name

in my VS in my code editor and component

folder. I make a file name is maybe

banner or home banner is better.

JSX in Ber add a basic direct arrow

function export component when I init

this.

So after that uh remove this banner and

now

first I lock this this

home section. Uh I think how to build

logic is how to is

oh

I think

I have idea.

Add simple text at top

f this left side right side and in

middle and let's say let's say

go to my code editor and first I'll

write a grid

I think grid grid is best and

create pause is to three. And inside of

this add three calls.

One is for

and one is for

and plurum around 20.

After that I add them from import button

and import from

this and tell me maybe what adding

button button maybe pass.

Okay. After that

I think I I need two more

tape section. How are this?

I want add one more grid. Inside of the

Git add a grid

false

two and inside of this add two more div

in these two div and add one heading and

add a one H

add a one H1 and inside of one H1 add

simple this 20 value So maybe 20.

Okay. Now this is after that you can add

maybe H5

H4

inside of the H4. But when you what you

write more traies more traies what you

write more traies. So

inside of this I write a more

trenies.

What is the spelling of trainers? T R A

T R A T R A I

and T R A I N

T R A I N W S V

and W Chinese. Okay. Not train. It is

Chinese.

Not Chinese. It is trainy. After that I

think one more dup uh I duplicate this

content inside of this div and change

the value change the h1 value maybe uh

20 to 30 and inside of this mode replace

with expert

trainers.

Sorry.

What is spelling of tren

ei

this is good.

After that, I think I

need a this image. So I'm going to my

asset folder and see the what is this

one is good and maybe

inside of this t I add image tag from

next link and

imit

from which folder is assets. I write the

path in this

I save and simple.

No, wait a second. First initial uh

port this panel in 8.jsx.

I think I I already here I already add

some basic next uh I this remove this

and add a JSX remove this image.

After that I import this banner from

this route

save and

it look like this.

I am going to this panel section. I need

to wrap this as a container. P container

dot MX A T R.

Duplicate this.

You can see

amazing.

Okay. Again this add simple card.

So how I can do this? I import this

make this card as a shared CN. So how so

simple you search shared CN on Google

andite and component section. After in

component section find the card

component.

Copy this simple physical done and work.

This is a card component and

put it up. Copy this because already I

installed this card with this command.

Now it's time to use this command. So

paste here this import command. This

import code. Now this is a uh use case.

So we're inside of this div.

So I think this is working or not.

So

add some image on this.

Oh my god.

This is these are the coaches.

Maybe maybe this image is good.

This image this guy image is

smack

here and copy this image and instead of

head

Let's see. Oh, this is looking

amazing.

Replace this.

Good. Uh maybe I adjust some

some width and height

this image

and this width is this

I think

I need some CSS code here

this and hide this

cover this and I I I don't need height

for device.

>> So I think uh I need to be change some

image maybe some implementation corner

and object cover and object cover is not

implement. So I think minimum first

minimize this and come to here banner.

Here's a banner code and flex flex flow.

Maybe this is not good image. I think I

change the image. Uh so I try this image

body builder body building. Try this

image. So in go to banner page and

replace banners model into bodybuilding.

So I think I try this and this is good.

So after that uh I remove this something

uh

remove some extra classes and now this

is look good. So uh after that I add

class name is object cover to cover

this. So maybe and double use.

Okay now this is good I add a round

corner with rounded

rounded. Maybe LG is good.

LG is good. Nothing. I think this is

good. Uh go to image. This

after image. I think I need uh uh I need

a uh title.

Uh maybe in footer. This is a footer.

And I need here title will be S2 and

error. Not this.

Maybe some currently

muscle building. Maybe this is good.

Maybe muscle spelling is good. I check

on web

muscle.

Copy

this spelling and paste it. After that I

add replace with this. So let me check

again. Now this is good must be good. I

think I need to be

in class name and class name is be

class name and class name is to be uh

I uh improve this high. I giving the

height of this font.

So giving a text

size maybe text 2 XL is good. Maybe try

2 XL is good. I think 2 XL is good.

2 XL is good. And um maybe some font

medium.

Font medium is good. Uh I think after

that I add the P and uh what I add

tomato and

tomorrow at uh

5:00 p.m. I think 5:00 p.m.

5

p.m. PM PM. So now this is good.

Save this. And after that this is good.

I remove this footer from here. And

this is looking much good. And I think

one more thing it needs here. So this is

not add like that add like uh

uh

arrow.

So how to from

import from this uh arrow down arrow

right. So this is good.

Giving a size is to be I think 20 is

good and close this.

Now this but uh I think I add some flex

and text center. So I again add some

interruption in my area. So I think I

add flex simple flex and justify maybe

between maybe try between is working

between is good. So I after that um

I remove this and I think I need to

change this uh remove from here and

replace uh paste in inside of the header

because this is header and now this is

good because automatically I'm adding

padding

adding successfully in content I add one

more class so space Y2

so this.

What does this

now? They look good and spacing is

coming soon. And I think the resize

this.

So inside of this maybe

flow and I have one more ideas more idea

is uh this is grid and inside of this

grid to grid I add

maybe

four four three two maybe seven two and

three maybe giving two two maybe giving

eight. I have an idea. So maybe I add

the last name gap into maybe five and um

maybe I I currently I sent them after

span

call span three and first call span two.

Uh copy this and call span four and call

span again two. Now let's see how they h

they look much better. So I think this

is good.

So now I item center maybe item center I

think item

item center is good. Currently item

center item baseline currently item is

baseline. Item not center. Currently

item is end I want that bottom. So So I

write I am bottom. So this is good.

After that uh now the main task is u

size of this image. So how I can do

this. So I think

so giving a class name and object this

try this.

Okay they look much better. Um I add

some padding from top and bottom. No,

I'm not adding currently top and bottom.

So why they look good?

Okay. So uh I'm going to

write a crop image online. So I'm going

to this website. Uh simple. You write a

crop image online. You find this website

crop your image in second. I love

image.com. And inside of this you select

simple

uh maybe which one is this?

Okay, maybe I'm going to this

while this you going to YouTube videos

and no not this go to for this and

inside of this YouTube video where is

the uh where is where is the where's the

project this flag project and inside of

this I know inside of public folder I'm

going to this website what is this. So,

so I think uh

PPG

I think first I convert this then

so again I'm going to this YouTube

videos and again going to Mac folder

again we're going to working project go

to project inside of this will the flex

flow and inside now inside inside a

public going to asset folder and this is

a web I want to convert this convert

into JPG and download convert image and

inside of this import like this and now

it's time to drop this image no what is

this

sorry Guys, I'm I'm I'm wrong. Select

the wrong image. I

want this banner image.

So, I want to resize this image, not

this one.

Now this good

download crop image into place into

panner as a banner replacement. Now I'm

going to this directory after download

go to this directory and where is this

image image image image this so I think

I don't need the uh this size of this

JPG image in name as a now again I'm

reload this page and after that uh you

can see

Okay, now they look much better. So, WF

I think I

currently remove this. Let's see now

automatically this is good.

Okay, again full this and maybe

again fully

good.

I have more images like

this banner.

This is these are the coaches.

I tried

this.

Oh, banner one.

I try banner one because here

try different image to

now look much better. After that I think

object cover is good and W is full and

again same process. So go to here and

select the image because some extra

space around the image. This is image.

Maybe this one needs image. So banner

one I select. Oh, I'm not converting to

JPG. This one crop image. I want crop

BG1. Now you can see here

now they look good. I think when I

after that download this image and place

this panel one as a replacement. So I'm

going to red my website after reload.

You can see something like that. No

image is

no.

But uh

remove this and

I want like that. So uh inside of this

uh I think I need to be

800 pixel giving a manually some.

So I think 800 is not good. I tried

1200.

Why not working? 1200

I think. And the high

should be 12.

Now they

replace into 800.

Now this look try nine

nine is good maybe I 1,000 pixel

now the the image is good wow

like like that

look like that

after that I think now image

one what what is what is the second

thing change

maybe

you see my screen in left side. I think

no uh I change it to left go to left

side maybe. Now it's time to change

this. Now it's time to change this. So I

I convert I'm going from left side to

right side my screen. So now image good.

Uh I I change I style first I style this

then I style at the background of text

this text logo. So first going to this

inside of this first div in

what is the

P Lauren.

So green class

text

to Excel.

Oh to Excel is good. H no no no. Excel

is good. Maybe Excel is good.

Okay. Excel is good. I think Excel is

good.

I have one more address. I think I

giving a call span into

uh call span call span call.

No, no, no, no, no, no, no. I think I'm

39. And now this is good.

Little bit space. No, no, no. This is

not good. Not good. Not good.

I think I giving it 10.

10. And giving a three. Three.

No, no, no, no, no. Not good.

So, this is good. Maybe in my in my

opinion, this is good. Um after this so

I think I need to be

add style this of button. So giving a

space into hole

into Y five.

Five is not enough. So I think I giving

a

10.

Now check again. This is good. Now

resize

the button

name after inside of this.

What is this?

inside of this uh first E5.

Uh maybe

try H10

W

6

is good.

XG is

20

is good. Maybe

font

not font size. I think I need to change

the size. So I try to Excel

and font medium and

its

now this is good. Maybe medium is not

working. So I think I need normal.

And

what is the

uh line throw? No

space.

I forget about this line thinker.

as

SPS

CSS

letter spacing.

Now what is maybe linker thinker

tracking? Sorry, tracking thinker. Yeah.

W maybe wide.

Wide is not good. Wider.

W is maybe good. W is good. After that I

I think uh change is

18.

Everything is good.

Now time to this

last name is equal to first to Excel

to Excel

font

medium and let's see

is not good I try to

excel

All full Excel is good. Maybe in chapter

now what is next? Class name again.

Class name text that's excel. Excel and

font. I think font is already medium.

Check this. This is match with no

I think giving this six

not good. I think seven and not

one medium is good. After medium

semipol

this is good and spacehu

it's good

inside of this I think I read this

symbol

no no no I have

Plus and size is to be 40.

So class name

AB

then after that I

so I think absolute

zero

right here

we write

M

copy this and paste here. And now you

can see

just simple

paste the values to target.

And one more thing I add here and

font prior font

font image font is not working on this

icon bold try board font is not working.

So inside of uh text primary text

primary now this is good. After that

maybe

go to Luca

website is

then inside of this website I think I

write uh P pls+

and you you see inside of this maybe a

little bit bold so I I think

this size is good

with I think

copy try copy JSX and paste here. Okay,

this this is a store value. So inside of

this I try uh

I try this at a first time store because

I never use before this uh stroke value

simply I use this as a

simply I use this like uh use simple

icon import from here and just simple

giving size and I'm never try this we st

I know this the strobe is available.

This is STO attribute is available and

next time I when I need a little ST and

use this get great uh maybe inside of

this. So go to my website and now you

can see little bit this. So uh inside of

this maybe five try five. Oh five is

good. I think I I try four. Four is good

maybe.

This is good.

Okay.

Now maybe spacing is

little bit. I think I g it. No, no, no.

Not here. Uh here. Giving it No. 20.

20 is not good. I think we try 16. And

inside of this. So what do you think?

This is good maybe or not?

I think maybe in in my opinion this is

good. Uh I replace into two Excel

Excel is better.

I have one more ideas. So

now you can see.

Oh [ __ ] Uh I not take proper screenshot

and I come back again.

Now this is good.

Search with the Google lens and uh maybe

this text is good.

Select the text.

Copy text. And inside of this I come

here and replace this text. Now try this

solution. I think this good

want this to be medium

normal. Normal normal is

Yeah, tracking make it a bit wide.

I think I I I need I write here custom.

So inside of this I add separate

brackets.

So inside of this I need to be maybe 18

pixel.

18 is not enough. I try to 24 pixel. No.

24 pixel. 24 is maybe try 20

22

22 is good. I think font is not good.

Remove this.

Going after this will be 20.

Again

go back here and replace into

pipe pasm

and inside of this giving a gap is equal

to five

maybe Okay.

Now maybe Yeah, it is right height is

zero. No, this is good. Now seriously

this is much

I think inside of this

be zero.

You see something inside of this spacing

right there.

automatically some add space.

Let's see.

That is good.

Oh, after that maybe something missing

or not. Everything is good. Everything

is good. So

now move into left side.

Look like that. Maybe this is already

good in but just need to be card inside

of card. Go to card. Uh maybe this is to

call inside with this card

in class name and

this

E4

is zero.

If I be zero then why did

this

I need to be

deadly.

So not

here

doing it too simple.

Now it's good and change

paste it here.

This is good. Now again go back here.

After that I think replace P2 23. Now

this is good.

No no I think two is good.

inside of this.

Maybe

this is inside of content.

Adjust it a bit.

Oh, this is good.

If I get this

before

now, good. H change something like that.

Now it's time to add some background

color. So now my turn is to black.

So if I g a bg

text

white

this is channel I need to be channelize

this

not like that maybe add

dot

Inside of this,

let's see.

Okay. Add a glow. Now I am adding this

is a globally. I'm giving a padding 20

from top bottom.

Mhm. This is good. So after that I think

I need to be top

not

40 and

this is good. T40 is good. And uh I'm

going to not 40

and uh PB maybe 20 is good.

I need a

on top. I need much work because I had a

this main flex flow uh at this inside of

pack.

So how I can do this? So now this time

is

here I am add simple one and inside of

this I am simple like this flex

not H1 not

element H1 element flex

So

what is the clause of this uh text

capital

upper case? Maybe

The bike is good I think. Okay. Class

name I already give a class name. So

yeah I need a maybe

no

I think I need a giving a manually. So

how I can do this? So I don't

miss this.

Currently 20 but flex flow is now the

good.

Maybe pink is good. And uh text

accent

center maybe

want pull pull.

Oh my god.

Small

now one

this

not only white

this

Try 80. Not 80 is not good. Maybe inside

of 85.

90 is good. Maybe a little bit. Now it's

time to position this.

How to index?

Z index.

Z index.

Set

like this.

Oh, this is written.

Where is the text?

index in

New Taiwan.

No justify center item center.

If I could how I

if I add minus

Oh my god. Oh my god. My My god.

Now it's time to reduce some bestie.

I think not adding tracking technique is

not good.

and let's flow. Oh my god.

I need to be top

10 and why at the bottom

not needed to be right just because flex

flow and just center item center.

Lex is number

I think

Not bottom zero right flex and justify

justify center. Okay. If left zero right

zero then this is we justify in center.

After that maybe top is 20

40.

Now let's see how they look.

They look much better.

If I put this bold version,

maybe I try popin again. Popin is good.

Uh maybe I try pop open version because

uh open

simple opens and inside of this open

change this supporting

maybe

maybe here I need to be sub this but in

variable I Okay, this need to be uh

open

and maybe show this

very good.

No, this is not here. Font is not

it is

p opens font

fine.

Yeah.

That's good.

If I not add this bit,

I think going to be

like

No this

Then just a little bit time.

Why not compiling

Why not

reload?

What is the issue in this?

Okay, like that.

Oh,

this is totally change when I change the

font.

Oh wow. I think inside of this banner I

reduce some tracking.

So if not normal is not if uh thinner

maybe this is good. Oh

let's flow. Maybe it's not looking good

because

try trying to take let's see good or not

let's see you try first you try if if uh

good then implement not good then simple

is collect flow

it's challenges maybe I think I need to

be

add some background

effect on the body

So inside of this flex floor.

So how they can do I can do this.

I'm going to

do

no shadow maker. Select image. I think

select.

Let's see.

I generally try the shadow maker. I have

idea

before. I never tried this shadow.

White shadow

smoke. White smoke is good. Maybe I

think white smoke is good.

They change and they need they need a

time maybe.

Um, which one is good? White shadow

little bit like that is good. But uh,

no, this one is good.

But what you think about this?

No, no, no. I think we go at top and

then this one. Which one you could maybe

maybe maybe

finding finding finding

little bit.

Let's try this.

Open image in new tab. What is this?

This is image. This image is not good.

White. Try. White.

white shadow.

Let's see

little bit this

still I'm finding network is not

working.

Simple

I open this is as a new tab image

and let's see download this

save and um SSD

shadow

I open this. If I

how the shadow look like

if I add here let's see inside of this.

I'm going to

uh again copy this image and replace

this and going to copy this shadow as a

let's see what is where this

where thisation

Not here inside of this div

and g to be as a

relative

relative and now this image good and why

Z index

then

where's the image

not zero

This

image this image not look good. So I

think I need to be good. Now I am

finding this uh blur image from Google.

This Google lot of time invest on

finding this exact uh glow and find this

and uh remove the simple background and

after that I add add background and

change two images comparison of this

banner one and banner two. Now they look

panel one is good maybe and uh in my

code I simple add just going to

duplicate this and relative this and uh

simple giving 50 opacity and rotate into

360 and top is into 60 and Z index into

my 20 but in minus and uh this is it

this it uh change object cover into

object container because object cover is

covering the image into both corners so

I prefer use object container now the lo

image is going flex glow good and inside

the right side good and the left side is

good everything is good now moving to

next something in the project simple you

can see here I am reload this page and

now I have an ID in my mind if uh when

reload this page and first simple man

bodybuilder show at ice cont bottom then

immediately change some animation into

direct uh straight forward to the man so

I've been giving the prompt into

Nano banana and I am simple. So I want

the same image of this what's Facebook

state and I text. Now this look they

gave me a state image and I am

downloading simple download the simple

image. Now a simple download full size

uh and banner one and banner three

replace with banner three and

immediately I come back at replace the

banner three and uh reload this page and

let's see

let's close loading and but you can see

here is this step forward image now I'm

in my mind the idea is I am some adding

animations and curies to when someone is

loading simple main image show after a

minute animation run and this image show

in front of this page. So let's see how

it can do this in this code. So here I

am again run my terminal again and

I'm going check out this page and I I

ask you I am just giving a prompt J&i

give the image and ask him give the

image second one and after that I add

something animation on here. So I show

you what I I am add here by the help of

AI. So when someone is reload the page

and let's say when someone load the page

and after immediately few seconds this

show because initial images

bodybuilder look up at feet and

immediately look at when animate look at

bodybuilder into state

let's show I show you once one more time

when someone is and uh in few second you

See some beautiful animation at uh front

of you in this body builder and at the

back of back of side this uh text flow

animate something. I show you what is

the inside what how make

here

this ready code and here this some

initial states

uh I use the cloudi help of k cloud to

implement this this functionality and I

simple ask this and this is my initial

image and I show you my chat so when I

go open my cloud and I I discuss

what prompt I gave Piccolo and what I

join it.

So let me show.

Okay, wait a second. the I'm going to my

chat

icon and inside of chat recent chat I

open my recent chat this is been my

banner image enhancement inside of this

I just simple ask and load this banner

and look this to look this is to main

banner and main center image and I

implement some logic with these image

the logic is when initial page load

banner pngage show and out of view

second banner three image with some

magic effect. Uh you can also see the

given image what is different and make a

logic for me misspelling is wrong make

us some realistic when

initially I give this from charity but

not giving a too much quick too much

good response and when simple uh they

look gen like a realistic animation they

animate like a fake look. So I I I I

think fake animation are look good but

then I realize try different prompt and

make different code. Then I add more one

more external uh prompt. Uh make some

realistic effect. This is look like a

fade effect. Maybe something like fake

fake fade. This is fake not fake fade

effect like some an effect I want. Good.

Uh I give three main prom into one

prompt but uh good but you can see in

the transition I noticed the animation

is in the animations but shadow animate

I want just animate main image they

animate I show you what they actually

does in initial prompt they made simple

when image is load they

they change the shadow effect on

background like different not sensible

and I asked Juna not change the shadow

background. We just change the image

main image and uh jump when someone is

load initial payload second animation

look like that look like that shadow is

not load add a background something like

initial shadow is not load okay this is

implementation now this is generate the

code and in then again some add the code

but I not satisfy this code then I again

giving a prompt inside of inside of this

code everything is good but the one

thing is missing in in this code the

background text uh background text can

and maybe I ask this. So use simple

animate this and and now I want the uh

animate animation on the background text

when some then this animation load and

immedately uh immediately load the

animation on this flex glow heading. So

this implementation

uh CL implement this logic into this

code. Then after they inside of this

code everything is good again this and

now this is main code and uh I show you

what inside of this code simple let's

see looking this I'm going to this side

and now you can see here is some add the

initial states initial state is maybe un

assets from banner png banner png may be

this one then some this this is initial

image and uh they use something uh uh uh

transition effects and uh set time out

and use effect simple inside of use

effect. You can see this uses set timer

out after some position and this is a uh

set current image current image to

change this set uh current image you

change here uh when which one image you

choose and uh implement here. After some

ease in out and clear the return and

implement a simple not too much heavy

just change the animation and use the

state of I I already I already not do

this type of nullity in my coding

journey then I maybe learn something

like simple to GPD you can this build

this. This is main thing is I have a

logic and logic is if logic is working

then good. If logic is not working here

then definitely not good. So when I try

the this logic is here and this logic is

working now maybe this logic is perfect

for this project because maybe need some

animation after the completion of this

project. Maybe when some all project is

complete then animate this project with

the help of your animation.

Uh maybe this is good animation

at my point

when someone is load initial.

You can see this is look but some

currently look like you can see this is

currently

again add little bit shadow at

background.

I'll remove this at my own site in in

after this project because when you use

a wipe coding and you definitely you

don't know uh too much coding because if

you not read your actual file generated

with code a coding assistant maybe uh

you not handle the code actually I read

out this code and what when this code

give me the code I definitely read out

this code because when I change

something in this code definitely uh I

need to read this code. So initially why

not I read this code. So in w coding I I

I

face this problem uh use agent modes and

a lot of problem in my when I use w

coding because w coding is automatically

do something in my folder and files with

the help of agent mode but I don't uh I

I know what change I know I know the

actual file what is the doing agentment

but in sometimes when I change something

with the help of agent modes and they

change any any thing and I not want to

change the any other thing. I just want

to change something and they think and

this is file ready fileing system. So um

in V coding I I make a proper video on

this this uh issue why V using V using

code or V using code use or V coding

maybe the two different people things W

coding use or not V using based on my me

I use how I use V coding in which

product I use V coding and why I not use

V coding in my personal projects. I

recent recently I uh in in my some

projects uh I make a Facebook post on

social social media and I simple ask uh

maybe Facebook social media post or in

someone post comment maybe post comment

wipe using destry the main project code

and in initial in basic setup you use

wipe coding uh to initialize basic setup

but in maybe

not too not too much use wipe coding in

law skills project maybe they change

something and you don't know what is

this change and maybe if if you use web

coding you I I prefer you all you use

ask mode ask mode is like a uh this is

another topic I share you proper video

on for you so here this is all of code

and here is generate something states

and initialize user effect after that

this add the transition at background

this is because main heading I have flex

glow And after this is a previous code

add before this. And this is main. This

is all main functionality here. Main

image containing with animation because

here you can see this is something

animation

energy effect and all of sparks this

effect. Maybe this is magic magical

light. So I if I comment this. Okay. So

if I remove this and something like that

going to reload this.

Yes boss. Yes, you can see here

h something in this good something like

something

maybe I think remove this

but

don't need this good

okay when someone is reload and how they

initially look Is

this this this is good maybe because

previous this is not looking good. Now

this is maybe perfect.

So done. Now what is next problem? Next

after this flex glue after this make

this uh brands logo under ammo my

previous in in previous part I

uh

use uh under armor under arours maybe

under armor under arours armors

brand shot

Zara is a good brand Nike is a good

brand these are these are all All is

good brand.

So let's see how to make this. So banner

section uh in at the bottom of this

section maybe I'm going to the here.

Maybe this file is

maybe

lot of lot of code inside of this file.

So I I prefer to make a one separate

component for uh this this banner and

attach here in this banner section. Uh

sponsor. Sponsor. Uh

sponsor maybe

sponsor. JSX into RFSC. And after that,

oh my god, in inside of this I think

inside of this um

Uh maybe uh just simple pick the

screenshot. Maybe screenshot is good

because

like

I think the screenshots

of these brand

you can use

different

icon and over here but currently I Just

pick the screenshot and implement this

into

here.

Minimize this. And where the screenshot

inside of the screenshot

where is the Zara?

Simple. I copy this and in inside of

this simple come in this first

and uh I'm going to this asset folder

and paste

inside of this.

Now you can see these are the so I think

name with sponsor one

and

so move this terminate

need two

sponsor. Rename this sponsor three.

Rename this sponsor four. Rename this

sponsor

five.

And now

send move into this asset folder. After

that now I think come to here in sponsor

file

first add a container and add MX to

centralize this container and now this

is good

now I think how much grid need I need to

five grid

so I first initialize this grid inside

of this I think I need five grid to make

this so in in In parent class I give

simple grid. And this is good.

And

maybe maybe

PG

white

bite.

I think this is to use as a

I think use this as this is black.

This is my theme is actually black and

white. Not use white. Black and green

inside of these. I think if I not add

this. So not add this just simple add

the image.

Image from next image

image from next image just giving a src

this one. And uh if uh sponsor.png maybe

because this is a screenshot

sponsor.png

okay sponsor

one this is good. Now copy this sponsor

and come to banner section and after

that

add this sponsor at the bottom.

is coming soon and leave

first minimize. No, this good

is coming soon. Now this good

now one more thing is here

I think. Now I am at this BG white item

center and

make first make a array con

and give

sp

what is this sponsors

this sponsor images sponsor images one

to asset from this and giving a map loop

just

giving a source and

this

just sponsor and this is array inside of

this five array target

five images data collect put here and

after it's simple add this sponsor image

and add the map loop

and giving a simple id and uh because

why initialize id is unique for every

key and this is image image from next

image inside of this image directly

source is from the

image image dot source this one source

or alt is maybe this one if I save this

im and let's see what is the output

now this is the output maybe I think

this is different background here. So

pick the color.

Go to color title and copy the color and

come to here and just add a manually

with

day like that. What?

What is this?

Now maybe this is original color pick

from now you can see

this is good.

After that maybe add some brown. So how

I can do this

here

P10

I think remove this

P10 is good and maybe uh justify center

and just item center maybe item is not

align okay now this is align all the

item is maybe align

after that maybe follow unity rounded

excel try rounded excel now excel is

good after that I'm giving a margin from

both all of four sides into 10 10 mean

2.5 rm

now you can see here is I think not

needed margin is not needed just

just margin is not good you Use prefer

first prefer the padding

then margin okay see the rule

so PT is equal to 10 PD 10 is equal to

same is padding to from 2.5 frame

I think PT is

uh PT PT is maybe

hard oh no No.

No. This is look good.

I think image inside of B section.

Where is the main image? Image. Image

from top zero. This one is shadow

and this one is

height. Now I change the code. Now I am

finding

this is uh maybe if I

uh currently

now here one I have issue. If the issue

is

image is not

image is cropped.

So I think

giving something

into 1200.

Let's see images again

but not good.

Wow, this this template this website is

maybe looking Wow.

Now what I do here test?

Oh, in your mind what is the solution of

this?

I have one more idea. Give me something

padding.

Try padding.

Giving a PB10. Let's see. PB10 is

working. Oh yes, both working obviously.

But at this left side is good. If I try

this padding bottom from 20

and this is good but uh I need one more

changes at the top is to 20.

Oh no no no.

This is not good.

Maybe

try 24

and after that maybe here just need

change to 226.

Now this is good.

Go to sponsor file and giving a

G0. And now this picture is looking

great.

No m this

no match with this

I think in banner section

top maybe 10

top 10

and now

giving a 20

20.

Now giving a 20 and uh

here just

24

and not 24 into 30.

Just giving it to 30 again. Replace 20

to 30.

Now this is looking great.

Now you can see

here

just animate this.

Now let's see the animation.

Let's see the animation. What is the

animation? Let's see the animation. What

is the animation? Animation is good.

Mhm.

Now this is look good. Uh after that now

moving to next step. And the next step

is uh just uh push the maybe push the

code into main branch. Just push these

images into main repository.

Uh refactor construure improvement

tables. Okay, this commit is good. After

that, go back to main template.

This is the main idea. After that, now

the next target is

uh make this our special program. Maybe

this is section. Uh now the logic is how

to build this our special program. And

you can see here at the top this is

maybe tab section all signature clause

cardio cycling and and the last one is

mind and body. So for these tabs make a

different content.

So now the next implementation is this.

So I use this tab uh as uh tab uh

component uh here use tab component from

shared chain UI just pick the structure

and now make this original content for

you. Okay. So next target is to be make

this our special program section and our

special program section. This is a tab

section program and every tab section

different content try to different make

UI and after jump in some then make this

UI successfully template completed

website complete then obviously add some

animation effects use of as animation I

repeat again again as animation okay uh

if you're not familiar with as animation

you try framework motion because my

system not uh too much uh capacity to

handle this uh at at the same time uh

CPUs and maybe I'm recording the video

the and OBS system OBS software and

obviously

uh if you I'm using frame motion in this

project so heavy project uh heavy load

on my system and definitely I am not

make a too much quality of videos so if

uh I am not u at my camera section

uh not simple just got the simple static

uh simp without my voice and uh without

any acid use then maybe I try frame

frame motion and frame motion is good

and I am I am using framer and motion in

every project because f motion is good

frame motion is key frame motion effects

and you have a lot of uh control in your

in in your hand uh and your hand and but

uh I research on different libraries,

different animation effects. Uh you your

choices, your choice what do you choose

you use motion and you use make custom

animation on your uh still in CSS and

implement your website. you use as

animation because I am using this a

animation previous mode 2 years when I

making our static project then

that day when I'm using uh I am one more

animation I am use is uh maybe for the

text animation this uh for the text

animation maybe rotting text area

so now again uh go to this uh my going

to my home screen. And now you can see

here is our special program section. And

now it's time to make this. Okay. Now

first look how to build this in your

mind you just when you every time when

you make something you first you see how

to make this how actually make this.

Let's see. I am currently seeing this

template and in my mind and is

when I look this this this UI and

directly in my mind ask you use simple

tab sections and inside of this uh you

make the EI and this is this all of

layout inside of tab section and you you

use main structure uh getting

prefer tabs. So you use different UI

component because I am currently using

tences. Tenc

lot of TS library. Uh they provide a

different components, different UI,

different styling component. And one

more thing I add here. I I have on my

own element UI component library based

on this reusable component library

because uh I when I make my shares UI

course then I realized that uh I make I

tried to make my own library

and run this as a as a future library.

Um

uh this is a library available on web

when you search on ele

UI

you find this what you find element UI

and obviously my own video you find this

on my YouTube channel and this this is

my element UI component library and if

you want scroll this this is a beginner

beginner friendly UI and this uh when

you click on the doc section you

redirect to doc section this is

currently running 0.1.7

you can now here you can you can see in

this project I use frame or motion some

layout effect you can see when I reload

you can see here you can see here uh my

system OBS working together and they not

do much animate this actual streamer

motion animation I I close if I close my

uh OBS and everything then they not lag

and immediately uh they work 100%

animation

so leave it this question and this is

introduction uh you can see the

introduction this is installation for

react and next currently two version

framework supported inside of this

component I I make a lot of components

and different variations. You can see

this code and this alert and different

variations and different type of button.

I'll add list maybe 20 25 28 32 lot of

buttons lot of different UI and you

visit my YouTube channel

I I make a complete video on this every

so how to use and everything in a react

and every project. So this is a code and

you just simple copy this and paste

here. Okay. Copy the clipboard and I

make you can see here examples lot of

components when you visit you definitely

find something

recently I update this 0.7 in 0.7 I add

some fancy testimonials create to reveal

what is cry to reveal this component

like uh different variation

this is scribe to reveal And different

variation, different circle. And this is

signature.

Okay. Code and previews everything. And

when download the SVG and everything,

use add select box. Add the when I have

one more idea. You use my tab uh tab

section. This is the same trigger system

uh like a simple import because

currently this library is not stable

because

uh I am not based on if you using a

react maybe react 19 uh with tailwind 3

and not use tailwind CSS 4 uh you can

use this uh because we currently not

updated this any this library on based

on uh tail Tent CSS 4. If you're using

uh currently three T 3 maybe in T 3 you

may definitely make the T config file

and maybe T config file in in this you

can see in this project do not make the

TIN config file. Okay, just post this

file for T CSS and initialize into

global CSS as a main. Okay. But in Tent

3 version, in in Tailwind 3 version uh

you use a tailwind config file and

initialize something and based on T3 I

make this and everything animations by

default when you someone is my main

component code add in my in your uh fi

folder structures then definitely add

automatically some code and some file

structure in your files and everything.

This is another topic and uh another

another implementation and logic. Now I

try to update this into tail 4 and uh

you using latest project. Okay.

But you check out this and try this this

code into t CSS.

So I return to my this this code here.

Uh

look at this. I'm going to this my I'm

going to search share change UI

going to component folder component

section component page in

and find the tab.

Find the tab section. Go to tabs

and you can see here is a

not working.

Okay, just simple copy the command

inside come to code and open the new

terminal

I think new ter new terminal and inside

of this just past this command and npx

shares in latest maybe they update the

variant

3.3.0 zero. Okay.

After that you just simple add this

component import and just use the

element. Now you can see inside of the

component tab tab dot GSX code is add

automatically when you run this into CLI

help of CLI command. This is the power

of CLI.

My component library is based on this

CLI.

After I copy this simple inside of

I think I just comment this because this

a previous change.

And now for this section I think I need

to be create our special program

file and implement this logic inside of

banner.js JS Mega SP special P R O G R

P R O G RM

P R O G

Now I'm GSX

GSX

What is this?

Maybe some lagging issue I face. Uh

let's see.

MP what react

um

code special program just copy this.

Okay.

I just return value and this

automatically export not export default.

So I export default into this.

Now paste. Okay.

again come

to to

here and copy this and paste inside of

this special program. After that

here just copy this

main syntax and add initial div and

paste here. Okay. Now copy the ex copy

this file main name and go to this page

layout section and

import here.

Now let's see what is this.

Okay, I forgot about I forget the

run.

Let's close all file. Now this is good.

G2 lag because

I use framer motion website. Show the

flamer motion website.

Now you can now you can see I

go to my got second right and now you

can see tab is working.

Now it's time to first

uh inside of this

uh remove this this special program in

header.

Add the C container MX0

and this is not looking good.

After that now add this functionality.

So how can they just take a screenshot

now the check the AI power

canly

you can see here this is ask mode AI I'm

currently use agent mode because can you

and what is this I think I need to be

subl to my screen here

can you Make

this

animation

effect

on this

DA

tab

selection.

Let's see what the is do for me is first

change tab trigger. Terrier. I just say

you change this into tab driver.

Now let's see import the card content.

Oh,

they import they use the use states also

use the use states.

Oh wow.

add the program some handle add to

handle scene some handle position let's

see

this is power

and

they add 100

Client

mode please. I make one. Hi. So just

simple make this animation effect on

this

only

on only only

make this

this effect on

this.

Where is the trigger section?

Not

all. Okay.

Now, let's see.

Now, let's see what

what he does for Oh, I forgot about

schedule.

I just simple giving the prompt and

still AI

do for me but not this is not good I I

make on I am not use because I use make

something different not according to me

so how can to simple go to this and

simple let's see this is the main

sections and inside of this

and first I I think I need to be go to

this main file and yeah pretty close

sorry code close

inside of this trigger here maybe first

I found the round how to find the

rounded

round and

this is a

round round round. This is around ALG.

If I remove this, what happened here?

Okay, this I mean around I think uh this

is good and inside this text muted bg

not muted.

Okay. Okay, now this is good. After that

maybe this are primitive and round with

the round round

and this is round. And if I remove this

round and now you can see the remove

round and just uh border transparent

add. So I remove the border transparent

from the background. Uh now still the

uh control F shadow I think.

Oh [ __ ] boss.

Shadow S shadow.

Okay. Transition. Transition shadow is

good. Data shadow. I think I need to be

close this and closing this. And after

that, now you can see this is just

simple

bar shoes. Oh. Now next target is make

this effect.

I have one more idea is when someone is

when someone is click they animate this

like that.

Okay. Now

just copy this

giving a just GPT this

and where is the context

open file folder. Oh my god. And and

again copy this. Take a screenshot and

give this screenshot.

Now main series command.

Look this image.

Look this. human

eye image. Image and look this image and

or

and uh and and look given

given

GI given.

Oh, GI given Trigger

code trigger code and I add

and I add

this

this effect this

green

effect on

when

Some one

sum one

active on

active on this

tab.

Let's

let's say if

okay this is good. This prompt is

enough. Let's see how they generate a

code for me. How they generate a code

for me.

I think

green glowing effect when tab is active

similar to signature clause. Green

effect is in the image. Let modify trap

taker component. Let's see what change

inside of this

they add the animation but

I want something realistic.

They add simple power data border and

one is active.

Okay.

You are fail JT.

You are fail.

I make on this. I I make on this

animation.

Okay. Simple as this. Okay.

Uh currently here transition and uh this

is a state when someone integ

is uh shadow LG. I try to border giving

it border two.

Okay, I'm trying to B2

and I think I need to remove the uh

border and uh

border primary.

Okay, now you can see I make condecl

some uh ask JPD you make this like that

like that but AI assistant train on

their own program then uh not

think about

how to make the user prompt.

So as a developer you prefer first you

make on and then if you start uh and

make do not rely on AI because AI

destruct your own because in in this you

can see this project I used the same

project I mean implement same thing

funality but chi is not currently

capable to implement this. So not uh do

not worry about AI change everything.

Currently AI is not changing anything

but in future AI change maybe AI

in my opinion is if AI build on coding

so how the how they how change how how

AI replace developer because let's say

AI is not a human because AI is not

human someone is someone make this AI

let's say if AI is

uh in AI I is in error in some error in

this current vin agility cloud. So who

who who solve this maybe they need a

developer to solve this problem solve

this AI agents all of this all. So how

every YouTuber AI is that AI is this? I

am totally disagree with why you make

every YouTuber I'm not respect everyone.

Every YouTuber why you

make this click this type of clickbait.

AI replace everything. AI does this and

and I'm seeing the videos on YouTube.

Yeah. Is everything in in hype?

Everyone, everyone want a views.

Everyone everyone everyone everyone

want a views. And for views everyone uh

make a clickbait thumbnails to get a

views because as a as as a beginner as a

as a inter intermediate

for let's say example I'm just simple

open the YouTube and I'm see seeing this

type of videos on social medias and I am

think at my own side yeah is not good

this language is not good why I learn

why this in future This is not good

language good. So now I'm not learning

this language. I am destroying I'm

distracted. So because I am distracted

and I am not uh focus on if I I I am

currently learning and if I watch these

type of videos I'm just totally

distracted because people people's

because lot experienced people's ask

about this CI this AI changing this

everything in recent time I use AI

change every developer like hype of

Devon AI Deon AI is change everyone is

ask I making a videos because I am when

I see the these videos of

developers lot of big developers,

YouTubers, million in million

subscribers they ask me and in my side I

think about they truly AI is everything

and I learn JavaScript, React and AI in

in few minutes change everything but I

when I enter the AI AI I learning AI and

in depth

an open open source model comes and in

I'm checking the opensource models at

background how it working be how how

when when uh when some YouTubers create

great create content creators make

something right like a videos like how

to use your how to make you help of uh

help of AI implement in your project and

make make a shorts video generator AI

and you generate something. So then I

realized uh this is the point at

at the back side at the back back side

of mine.

Yeah, I need some instruction because

currently I open something for you. I am

currently working on some dual code to

coder project and I make something logic

when someone is generating a coding what

you uh what you give the what you give

uh user because as a beginner as a my

everyone everyone every young generation

when see these type of videos and they

just totally distract kindly not make

these type of videos and if uh not

distract just Ask simple this type this

EI is happen to continue your learning

and this is not replace you just focus

on learning learning learning you simple

ask me this EI change your developer job

you not replace your job and everyone

every every beginner and every every kid

distract totally would they not

interested if if they build something

interest in coding and definitely watch

your videos and they totally

okay I show view my something real

project for you. Where is the project

dual coder? I think uh in this uh

okay I open this here

open folder and uh

in secret folder maybe in secret folder

or something GitHub projects and uh I

show you something. I show you something

then you realize how actually work

something where is the dual code AI

you now you see the actual how how the

how AI back ends in back side of works

okay

this is Prisma DMC because uh Prisma

database because

SQL database. I use this. Now I see you

something. Uh where is the file? Huh?

This is a testing script. Uh inside of

now this maybe this this is UI

subscription is a layout section inside

of maybe this app. generate code

inside of this and code editor.

Now delete code root.tsx

and subscription. No, no, no, no, no,

no no.

This is portal access. Okay. Prompt

input. Now you can see here's a prompt

input file.

You can see my screen. Okay, maybe

everything is clear. Now you can see

here

this is example prompt section. Okay, I

just simple example prop section and uh

inside of this just make a UI and uh

here is coming from section

code editor and

there is the gener code Maybe we

Okay, I think I go to my one one thing

one more because here I have some secret

files.

Okay.

Okay, wait a second. I'm coming here.

Okay, this is okay in lips uh folder.

Okay, this is AI section utilities some

utilities section inside of the now you

can see here I just use Gy Jim is my

have a gimmin access pro and just simple

log something and when what is in

structure what is currently what I

explain you AI how you can make the code

on based on this uh okay let's say I

just use a model and generate code

capacity output genetic uh output

generator tokens. How my token use at

back sign and it disable thing for a

faster response and lower cost. System

instruction. What is system instruction?

You you are a senior developer. You are

a senior developer. You are a senior

software developer. Generate clean

product production ready code without

explaining unless uh this one. Okay.

After that I I am something uh ask one

one more thing is just uh go back scroll

down down down

uh AI services and mock AI and this is

maybe this one is

oh okay open AI prompt this one this

prompt AI okay you are a senior

developer and task your first your task