Build a Stunning SaaS Landing Page with React, Next.js, TailwindCSS & Framer Motion | Full Tutorial

May I know what browser settings are you using to get those breakpoint tabs??? In chrome its different. You dont get to choose tab,mobile and desktop

Hi, may i know the name of chrome extension used to view all viewports at the same time?

🎉awesome. Next step How to store data when user click on get free and choose price. Still on landingpage or manager by backend ?

where do you get the images and icons?

thank you!

which browser you using for the development , how to get different breakpoints

why the desktop size is only 1200x800? mine is alot bigger and the desktop view is different from ur..😢

thank you so much bro, this really helped me out so much, please continue making more projects like these, and this might be a selfish request but could you try to make a website using only next.js, css, and jsx not ts. I wanted to learn jsx instead of ts but the only reason im learning ts is just so i can follow this amazing video of yours, and again thank you so much for this tutorial

how did you see responsiveness is there any extension or somethingelse?

Hey, Great stuff. my TestimonialColumn in the div container returns an error - cannot be used as a jsx component. How can I solve this issue? Thanks. Long Live frontend tribe👏👏👏

Anyone got @apply problem in globals.css ??

what the extension you use display responsive web the browser ?

This is one of the best tutorials I've ever seen in my entire life. Your eye for detail is unmatched.
I finished watching it and implementing :)

Hello! Your tutorial is very helpful, and I'm a complete beginner, but I find myself inspired and surprisingly not have a hard time understanding how things work thanks to your explanations! Following through feels like a breeze! Thank you for sharing. I would like to share one thing though, which could be a heads up?

This isn't to say that there is any problem with the code, but I just found myself getting a different result to yours in the Call to Action section, particularly with how the images are positioned on mobile view. I'm still trying to find out what's making my spring image and star image still show up in my mobile view. Only the edges of the images are visible, so it looks similar to the tablet view that sort of cuts out the elements, but in this case it just... peeks through the sides of the page?

The rest of the sizes work beautifully, with the tablet and desktop view expanding the same way as the designs. I'm pretty sure I follow your codes precisely, so I'm not sure what's happening, unless I missed a few div tag placements or something, which is probable and would be my fault😅 Or there might be some differences between the browser I'm using to test and yours. It isn't particularly distracting or obstructing the text, but it just turns out differently.

To work around this, I ended up changing the class setups for both images a little bit to include the setups similar to the images in Hero section. The classes are now: "hidden md:block md:absolute (and then leaving their respective positionings unchanged, following your configuration)".

Doing it this way got me the desired result! So, just thought I'd share here, in case it would be helpful. Again, thank you so much! I learned a lot from your video. I'm a subscriber now, looking forward to learn more 😊

what you are using to view the page (browser) ?

Buddy in the pricing part you missed the white background :)
no problem, we got you.

Amazing!!

Just want to say thankyou so much, this turned out to be BEAUTIFUL! I really hope you get all the success on your channel! Love from Pakistan <3

Can you tell me what kind of theme you are using for vs code?

What is the extension you are using to view desktop/tab/mobile view in the browser?

I finished all project but gradient property not worked in tailwind css !

Please, enlight me, guys, how to install the starter project to creat the landing page? And where all the beautiful UI imags come from?

I finally finished this project and I must say this was sooooo easy to follow even though I've never really learned react before. I learnt so much about react and tailwind css and I'm sooo excited to actually dive into the fundamentals because this video was so graspable

Thanks for the great video ! do you mind sharing the hamburger menu (mobile version) to be clickable & show up the menu ? thanks

This tutorial was sick. I'm surprised you don't use Cursor IDE though

what is your development browser name sir please share me

Guys how did you manage to get the resources ? or where did you get those resources especially the assets?

Hey where can I download illustrations like this?

Thank yo buddy


looking forward to more challenging frontend projects

Neat❤

how to get this pane browser view?

It's beautiful, but in my pc i'm having problems with gradient and masks, it dont work.

can someone tell me how things aligned with a gap on the borders in header without an x padding?

damn this tutorial is awesome! the tracking-tight is awesome, also that image mask.. i didnt know that before. thank you very much

What an awesome tutorial! just one thing, could you please make a github repo for all these project..it'll be really helpful, thanks!!

finally completed this one today!!!!

Hello i dont receive the assets...

It's an amazing Video for teaching all and I have a question which extension or tool did you used for testing the design in all sizes like tablet or Mobile or other

Demo Links not working. -- correction: i have to reload 2 times then sites are working

Love the video but when I tried deploying it to gh-pages or when I just ran "npm run build" in general I am seeing this error:
"Failed to compile.

./node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs + 187 modules
Unexpected end of JSON input"

Any ideas on what this could be?

Is it a browser or extension that you use to display these panels? “mobile” “desktop'” etc.

Thanks! ♥ 💯

can anyone help me to get the video resource bundle, It's not working for me!

Awesome tutorial!! We appreciate you for making this bro. Learn A LOT!

Hej, Thank you for the high quality you are giving for free. Can you please let me know the extension you are using for seeing all versions (Desktop, Tab, Mobile) of UI at the same time?

completed it, loved it, learned it and gonna practice the heck out of it.....Thank u so-so much. Your explanation is kind of beauty.

Hey just finished watching your vid, i just want to appreciate your patience and i like the approach for template first animation after then bug fixes

You can use alt + z on windows for toggle word wrap

Ctrl + b for toggle side bar

Win + arrow left/right to get the vscode and browser in position again


I was wondering why you make hero tsx and and product tsx client components, the reason why i ask if you look at nextjs docs instead of doing dom manipulation in the entire hero tsx you can just make a component for the client components section and import it back

The reason i mention this is because then only the animation will be client while the rest of hero tsx will still be ssg

What are your thoughts on this ?