When I first saw your tutorial with its stunning design and subtle animations, I knew I had to build it. But when I realized you were using Tailwind CSS, I hesitated. As a long-time Sass and CSS user, I was reluctant to clutter my HTML with so many classes. But I decided to give it a try. The way you explained your thought process, breaking down the pixel sizes and underlying CSS, made me fall in love with Tailwind. Thank you!
I've never followed a tutorial from start to finish before, and I'm so glad that your video was the first one I followed through with. I truly appreciate the great work you've put into it, and I hope you continue creating more valuable projects like this in the future. ❤❤
wow, I am absolutely impressed.. so many coding tutorials I tried to learn from but they are boring ad slow paced, but you explain everything perfectly and I understand everything, and you make it fun. and your design skills are amazing, keep up the good work man, you are a genius, thank you for this awesome video
The best part about this video is you translate your thought process very conveniently for example rather than going direct with framer-motion you build things in Tailwind and then erase it and show it in Tailwind one of the best tutorials to follow along I erase code and am able to play with gradient and styling the best thanks for that
I love the fact you use all tailwindcss. maybe nextjs you can enforce only design system styling in tailwindcss config... also show us the process of thinking about complex animations from Figma, trial and errors etc. That would help and love to watch
my guy never disappoints , your amazing ....i cant wait to start building this ...i could have given you 1000 likes but everytime i click like morethan once , my like disappears ..keep up the good work your amazing
Hey man, all respect to you for your effort and work with us. Please continue in frontend tutorials only , not like other channels do full stack stuff, please please just frontend related stuff in the near future when the channel grow up. Also looking forward to insert gsap in the tutorials that will be great benefit for you and us. You're channel is actually very special and all of the team members of developers were impressed by the channel so great work man, good luck ❤
Frontend Tribe is one of the best frontend UA-cam channels I've discovered in recent times🔥 I'd want to see you create more projects beyond the SAAS landing page. Many junior developers, like myself, would greatly benefit from developing full-stack apps while learning the best practices. But please do not make another app clone videos like many UA-camrs do. 😃
Kudos on the advanced tutorial and the fantastic resources you’ve provided-they're truly impressive! Just a small note: I find it a bit challenging to keep up when you write code so quickly and then move on to other things. Would it be possible to slow down a bit and explain each step in more detail? I’d really appreciate it. Thanks again! Greetings from Italy and keep up the great work! 🇮🇹💪
great content as always. Cheers. One question in mind when seeing the introduction. is there any special tool that you used to create the animated video for the "landing page introduction" ? or you just edited it with regular video editor tool? It looks really amazing with cool effects. I would love to create similar one to showcase my own projects. But I'm not familiar with any video editing tool at all
I am unable to find lottie animation files even in your package these files are note present due to which I am using png file which does not support animation.
what if make this plannet asset and just use it instead of creating it from scratch ? Is there any difference or how this approach will work. Can anyone suggest or correct me.Thanks
Love Your Video , Making it the Modern LMS front page , Where to tag you Sir? You're Awesome. Please Make more videos , because nowadays its hard to find Tutorials like this , Everybody Do Typescript more then the design , I like the way you are Tailwind 90% , ts 10% , Please share your social media , i want to connect with you sir?
@@frontend-tribe Thanks, I was able to sort that out My other issue is one where the styles for the world in the hero section aren't applying as they should, the code also isn't easy to read as I'm a beginner Update: Never mind, I was missing a parentheses. Great video👍
I really like your work so much i have completed the previous two projects you have made and now trying to do the third one and i really have one doubt that is how are finding correct gradients value ? Like if you see a figma design and it has a gradient like how this website hero section has how are you figuring out the proper way to code it . Plz reply
Awesome to hear your progress! Gradients are hard in Figma because it doesn’t always give you exact values. I know because I always code them up before teaching 😊
not explained , how you got all the gradient colors? you are just directly pasting the gradient colors , so its hard to understand from where did you get those colors ?
It shouldn't matter - updated specs allow you to use opacity with `rgb` 😊. You can use it with the modern syntax like this: rgb(0 0 0 / .15) or the legacy syntax like this: rgb(0,0,0,.15)
hi am having error with the Header.tsx so it's says on the local host like this: Build Error Failed to compile Next.js (14.2.5) ./src/assets/logo.svg SyntaxError: C:\Users\d\Downloads\ai-startup-landing-page-resource-bundle\AI Startup Landing Page ΓÇö Frontend Tribe\frontend-tribe-ai-startup-landing-page-template ode_modules\mdn-data\css\properties.json: Unexpected end of JSON input at parse ()
Will Framer will replace Frontend developer? Many people's saying that Framer is no code web design. We can design and export the code and paste into our project. Is it true I'm scary 😢
No tool will ever replace front ends, because businesses (the ones that hire us) will always want more capability and integrations than exists in any of these tools. At the enterprise level, businesses are solving new problems and have to use code to do it 😊
When I first saw your tutorial with its stunning design and subtle animations, I knew I had to build it. But when I realized you were using Tailwind CSS, I hesitated. As a long-time Sass and CSS user, I was reluctant to clutter my HTML with so many classes. But I decided to give it a try. The way you explained your thought process, breaking down the pixel sizes and underlying CSS, made me fall in love with Tailwind. Thank you!
That’s awesome to hear, thank you!
one of the best frontend content on youtube. hats off.
The intro itself is enough to make me subscribe. High quality stuff. I'm doing this tutorial immediately.
Haha thanks!
@@frontend-tribe Fr though, Your intro was the main reason I decided to check out this vid and I was not disappointed
Even got me to subscribe
I've never followed a tutorial from start to finish before, and I'm so glad that your video was the first one I followed through with. I truly appreciate the great work you've put into it, and I hope you continue creating more valuable projects like this in the future. ❤❤
Awesome 💪! stay tuned 😊
wow, I am absolutely impressed.. so many coding tutorials I tried to learn from but they are boring ad slow paced, but you explain everything perfectly and I understand everything, and you make it fun. and your design skills are amazing, keep up the good work man, you are a genius, thank you for this awesome video
The best part about this video is you translate your thought process very conveniently for example rather than going direct with framer-motion you build things in Tailwind and then erase it and show it in Tailwind one of the best tutorials to follow along I erase code and am able to play with gradient and styling the best thanks for that
Glad that’s helpful for you 😊
I love the fact you use all tailwindcss. maybe nextjs you can enforce only design system styling in tailwindcss config... also show us the process of thinking about complex animations from Figma, trial and errors etc. That would help and love to watch
TailwindCSS makes my life easy 😊
Perfect for the weekend.
My Man never fails to providing High quality content ❤🎉❤
I try my best 😎
Man your tutorial is a xmas gift for me :D, wish u a merry xmas bro
my guy never disappoints , your amazing ....i cant wait to start building this ...i could have given you 1000 likes but everytime i click like morethan once , my like disappears ..keep up the good work your amazing
Haha, I appreciate it!
Your videos are absolutely amazing! Including the source code for them would make them even more helpful and engaging for viewers.
He's really good. This channel will explode soon.
I love this guyyyyyyy
It is illegal for this to be free!!!!
Really excited, thank you frontend tribe ❤
He is extraordinarily proficient in CSS, but I loathe CSS with a passion-I'm talking about a burning, fiery hatred!
Why 🤔
subscribed already man, keep these tutorials coming, they are super helpful while creating portfolio for interns and freshers
Thanks, will do!
such a very premium and high quality content sir, keep them coming and thank you for the time and effort you're putting on these tutorials.
Thanks so much for the kind words!
Hey man, all respect to you for your effort and work with us.
Please continue in frontend tutorials only , not like other channels do full stack stuff, please please just frontend related stuff in the near future when the channel grow up.
Also looking forward to insert gsap in the tutorials that will be great benefit for you and us.
You're channel is actually very special and all of the team members of developers were impressed by the channel so great work man, good luck ❤
Thank you for the kind words. We're named Frontend Tribe, so I think it's going to continue to be frontend content 😉
@@frontend-tribe
Love the sound of that, looking forward for upcoming tutorials boss💙
If u r having same width or height. Then instead of using w-64 h-64, you can use size-64
Good call 👍
I was about to comment it just now, good to see you already did.
I love this bro !
Thanks, I really appreciate it!
These tutorials are so easy to follow to produce impressive landing pages. Going to give this one a go!
Glad to hear it. Hope it turns out well 😌
You have a good way of teaching. I am a beginner and you explain everything very clear and understandable. Thank you!!!
You're very welcome! ☺️
Supercool look 🎉 please make a tutorial on framer-motion
@@udaycodes +1 ✅
youtube Tom is Loading xD literally framer guru
wow... Thanks for this awesome Nextjs project like I requested!
You missed the navbar for mobile which will expand using the button and the pricing section.
Thanks for giving such quality content for free
No problem - happy I could help 😃
i just finished the project. Thank you so much for the teaching.
You're very welcome! 😊
bro could you please share the live and repo
You like a javascript mastery!
They are a good channel - waayyy more video views than me though 😆
As always your video it amazes me thank you so much
Please make a complete tutorial on framer motion
@@dharsanr6504 +1 ✅
This might be coming soon - stay tuned 😁
Frontend Tribe is one of the best frontend UA-cam channels I've discovered in recent times🔥 I'd want to see you create more projects beyond the SAAS landing page. Many junior developers, like myself, would greatly benefit from developing full-stack apps while learning the best practices. But please do not make another app clone videos like many UA-camrs do. 😃
Oh yeah, for sure. I'll branch out a bit more in the future - stay tuned 👍
Kudos on the advanced tutorial and the fantastic resources you’ve provided-they're truly impressive! Just a small note: I find it a bit challenging to keep up when you write code so quickly and then move on to other things. Would it be possible to slow down a bit and explain each step in more detail? I’d really appreciate it. Thanks again!
Greetings from Italy and keep up the great work! 🇮🇹💪
Then this video would be 8 hours long 😂. But I hear you on that. Thanks for the kind words!
to center the planet rather than doing -translate we can just to justify-center at section which will bring the planet and rings in center !
great content as always. Cheers. One question in mind when seeing the introduction. is there any special tool that you used to create the animated video for the "landing page introduction" ? or you just edited it with regular video editor tool? It looks really amazing with cool effects. I would love to create similar one to showcase my own projects. But I'm not familiar with any video editing tool at all
Thanks maann! I learned alot from this
Your welcome, thanks for watching 🙌
Yeah this we want actually ❤
Is there a reason why the default background is white when i run `npm run dev` whereas for you it's black? and with that the footer is not rendering.
Awesome just love it.
First of all : :D Which is this genious Responsive Viewer u using ?
Thanks! ♥
the best part is extra closing body tag 😬
i cant download the bundle, i used link u gave, but i aint get any message or bundle.
I am unable to find lottie animation files even in your package these files are note present due to which I am using png file which does not support animation.
Awesome tutorial❤ but can you please make a tutorial on framer motion
JavascriptMastery vibes 😅
Nice tutorial btw!
Glad you liked it! 😁
what if make this plannet asset and just use it instead of creating it from scratch ? Is there any difference or how this approach will work. Can anyone suggest or correct me.Thanks
greate video, please add moving snake and disappear on background squares
Waiting for how to make such designs video 🙏
Btw nice content
Thanks a lot. I'm not a designer - I just like creating amazing designs 😊
Love Your Video , Making it the Modern LMS front page , Where to tag you Sir? You're Awesome. Please Make more videos , because nowadays its hard to find Tutorials like this , Everybody Do Typescript more then the design , I like the way you are Tailwind 90% , ts 10% , Please share your social media , i want to connect with you sir?
I don’t use social media other than UA-cam 😅
You'll make history someday
This comment hit deep - appreciate it!
Amazing one😊
Thanks 😄
Thank you! Is there a way to see a code for finished website?
Not atm, sorry
i am new to this but i have a white background instead of dark. how do i change that?
Should be the body class that makes it dark by default. Are those correct?
add this in layout.tsx -
import { twMerge } from "tailwind-merge";
{children}
@@frontend-tribe tw-merge is missing in resource file.
@@frontend-tribe Thanks, I was able to sort that out
My other issue is one where the styles for the world in the hero section aren't applying as they should, the code also isn't easy to read as I'm a beginner
Update: Never mind, I was missing a parentheses. Great video👍
what's the browser name you're using to view site from different devices
Do you create your own designs as well? Do you create design for other? 😄
My designs are heavily inspired by others. I don’t consider myself a designer, just someone who likes to build great-looking projects 😄
@@frontend-tribe amazing designer as well 👍🏻 where do you look for inspiring? 😄
NFT MarketPlace project please, That would be so much learning and fun to showcase in portfolio
Yup, might do that soon. We’ll see 🙂
Wish you could teach us how u get your gradients values
I wish they were easier to get from Figma…
Nice proyect ❤
Thank you!
Please a next.js portfolio next.
Stay tuned 😉
I really like your work so much i have completed the previous two projects you have made and now trying to do the third one and i really have one doubt that is how are finding correct gradients value ? Like if you see a figma design and it has a gradient like how this website hero section has how are you figuring out the proper way to code it . Plz reply
Awesome to hear your progress! Gradients are hard in Figma because it doesn’t always give you exact values. I know because I always code them up before teaching 😊
can we tell me which extension you use for responsiveness check 3:51:26
Link is in the description 👌
Is there a reason why the default background is white when i run `npm run dev` whereas for you it's black?
did you able to solve the problem?
bro is not pregnant but never fails to deliver
😆 too good
does anyone facing issue while centering the planet at 43:45
Thanks In Advance ❤
You’re welcome 😊
not explained , how you got all the gradient colors? you are just directly pasting the gradient colors , so its hard to understand from where did you get those colors ?
It’s in the Figma design…
@@frontend-tribe Thankyou
Excellent video and showcase! It would be even better without the zoom in/out edits, it's very hard to follow
Thanks for the feedback. It's a tough balance to strike for sure - zooming lets me make the text bigger when typing, but I can see your point
@@frontend-tribe I think the zoom is an amazing touch, thank you !
whats the name of the website or the extesion to see all the type of screen at the same time ?
Check the link in the description 😊
Can you tell me which tols you have used for responsitive testing . that showing on right side.
Check the description 😊
Any way we can get access to the finished repo?
Not yet - have some ideas in mind for giving access in the future ☺️
Please make a landing page for NFT marketplace
Stay tuned - that might be coming in the near future 😉
@@frontend-tribe please that will be great learning project....
Amazing video,
could you create a sport landingpage? like football (soccer) for example for a team? :D
Might do that in a future video 🤞
Im stuck at some components i watch over and over again but things just don't work for me ... Can i refer solution file?
I don’t have a solution file right now, sorry 😞
anyone able to share a complete version on github? I did it but its abit off for me. thanks
Is it just me or does everyone get enoent errors, problems with files inside of fronted tribe folder ?? Like i can't do anything, everything is red.w
Did you miss doing an npm install?
right click on folder in vs code then open in integrated terminal, the error is because npm doesn't recognize the folders package-lock.json
Can anyone explain why he mentioned NextJS in the title, is it also nextjs based or we can go through it with only react?
Next.js is just React with some extras. You can do it in just react if you want 😊
what vscode theme you're using please? I like this colors
It's not a VSCode theme - it's actually another IDE - Cursor. Link is in the description 🙂
the planet gradient is not working for me don't know why
I just stop the dev server and delete the .next file and then again run the server and it works (❁´◡`❁)
Looks like you figured it out. Good debugging 🙂
@@frontend-tribe 😀😀😀
How do I deploy this project to github pages? Is there way to do it?
Yup, always a way. GitHub pages docs are the best spot to figure that out 👍
the email with the figma file It never reaches the box, in other videos it happens too :(
Might just be getting filtered as spam - shoot a message to support@frontendtribe.com for help 👍
Shouldn't you use rgba when adding the opacity? Pretty sure your rgb things were not working properly
It shouldn't matter - updated specs allow you to use opacity with `rgb` 😊. You can use it with the modern syntax like this: rgb(0 0 0 / .15) or the legacy syntax like this: rgb(0,0,0,.15)
what if we make one such with three.js/R3F ?
Sounds interesting!
@@frontend-tribe Like what we learnt here in this build, only three.js content is felt missing and rest is all fire🔥
Glad u took it !!
ring-[1px] ring-[#a091b5] you can use this properties instead of this component or you can ad gradient . love from pakistan
Any way I could I pay for this repo? Or even just the hero section code?
Yes, but it costs time, not money 😅
@@frontend-tribe He's wise beyond his years.
I understand now, Senpai.
The files can't be downloaded
Send an email to support@frontendtribe.com and we can help you out
what browser r u using...
Link in the description 😎
@@frontend-tribe it's premium version ig...
Can you build a portfolio website for a frontend developer
Stay tuned - this one might be coming soon 😉
hi am having error with the Header.tsx so it's says on the local host like this:
Build Error
Failed to compile
Next.js (14.2.5)
./src/assets/logo.svg
SyntaxError: C:\Users\d\Downloads\ai-startup-landing-page-resource-bundle\AI Startup Landing Page ΓÇö Frontend Tribe\frontend-tribe-ai-startup-landing-page-template
ode_modules\mdn-data\css\properties.json: Unexpected end of JSON input
at parse ()
can anyone help me please!!
Did you start with the provided template? It includes an SVGR webpack helper to bundle SVG's automatically :)
Amaizing vidéo. thank you but download resources don't work.
Sorry to hear that - email support@frontendtribe.com and we can help you out
great video man, was wondering if you can include the github link please.
Sorry, I don’t have a public GitHub repo for this one
Can I get Source code of this project directly please
why
Where can we purchase the source code?
No source code for that one, sorry
*Quality* content ❤
Thanks - glad you're enjoying it!
Chrome extension name for device ?
It’s the polypane browser - check the link in the description 😊
Is this website using ssr
Thank you so much I have learned a lot which I haven't exposed to
Will Framer will replace Frontend developer?
Many people's saying that Framer is no code web design.
We can design and export the code and paste into our project.
Is it true I'm scary 😢
No tool will ever replace front ends, because businesses (the ones that hire us) will always want more capability and integrations than exists in any of these tools. At the enterprise level, businesses are solving new problems and have to use code to do it 😊
@@frontend-tribe thanks for the clarification bro will learn peacefully now 💯✅❤️💖
i have started to build
good luck with me
Good luck 😊
lottie is not free right?
Some parts of Lottie aren’t free, but you can do most basic things for free 👍
is there any way to get source code
I show you how to build it in the video 😊
hey why dont you provide final source code???? btw project is mind blowing
Stay tuned - I might be providing source code soon 😊
@@frontend-tribe especially to double check the complex bg-radial-gradient lines haha