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
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!
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 ❤
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! 🇮🇹💪
Frontend Tribe is one of the best frontend RUclips 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 RUclipsrs do. 😃
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 😊
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?
hey, i downloaded the template and started coding however i am in light mode, so if i go in global css and make bg black i can see the nav links etc but i wanna make it dark mode so it doesnt disturbs my learning how to do that?
@@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👍
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)
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 😊
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 ()
Hi great work but i get this error after i run the npm run dev command Build Error Failed to compile Next.js (14.2.5) ./src/app/layout.tsx Error: × Unexpected token `html`. Expected jsx identifier ╭─[/Users/aac/Desktop/AI Startup Landing Page - Frontend Tribe/frontend-tribe-ai-startup-landing-page-template/src/app/layout.tsx:15:1] 15 │ children: React.ReactNode; 16 │ }>) { 17 │ return ( 18 │ · ──── 19 │ {children} 20 │ 21 │ ╰──── Caused by: Syntax Error
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
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 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 😊
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
Perfect for the weekend.
My Man never fails to providing High quality content ❤🎉❤
I try my best 😎
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 😊
Really excited, thank you frontend tribe ❤
He's really good. This channel will explode soon.
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!
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! ☺️
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 😌
He is extraordinarily proficient in CSS, but I loathe CSS with a passion-I'm talking about a burning, fiery hatred!
Why 🤔
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!
@@frontend-tribehey bro, Can you please make a NEZT JS tutorial for beginners?
subscribed already man, keep these tutorials coming, they are super helpful while creating portfolio for interns and freshers
Thanks, will do!
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💙
Supercool look 🎉 please make a tutorial on framer-motion
@@udaycodes +1 ✅
youtube Tom is Loading xD literally framer guru
i just finished the project. Thank you so much for the teaching.
You're very welcome! 😊
Thanks maann! I learned alot from this
Your welcome, thanks for watching 🙌
I love this bro !
Thanks, I really appreciate it!
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.
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!
wow... Thanks for this awesome Nextjs project like I requested!
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 RUclips 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 RUclipsrs do. 😃
Oh yeah, for sure. I'll branch out a bit more in the future - stay tuned 👍
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 😃
As always your video it amazes me thank you so much
Awesome tutorial❤ but can you please make a tutorial on framer motion
what's the browser name you're using to view site from different devices
Thank you! Is there a way to see a code for finished website?
Not atm, sorry
Yeah this we want actually ❤
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 😊
Awesome just love it.
You like a javascript mastery!
They are a good channel - waayyy more video views than me though 😆
greate video, please add moving snake and disappear on background squares
JavascriptMastery vibes 😅
Nice tutorial btw!
Glad you liked it! 😁
Please a next.js portfolio next.
Stay tuned 😉
NFT MarketPlace project please, That would be so much learning and fun to showcase in portfolio
Yup, might do that soon. We’ll see 🙂
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 !
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 😊
ring-[1px] ring-[#a091b5] you can use this properties instead of this component or you can ad gradient . love from pakistan
Wish you could teach us how u get your gradients values
I wish they were easier to get from Figma…
You'll make history someday
This comment hit deep - appreciate it!
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 RUclips 😅
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 🙂
Nice proyect ❤
Thank you!
hey, i downloaded the template and started coding however i am in light mode, so if i go in global css and make bg black i can see the nav links etc but i wanna make it dark mode so it doesnt disturbs my learning how to do that?
Amazing video,
could you create a sport landingpage? like football (soccer) for example for a team? :D
Might do that in a future video 🤞
Thanks In Advance ❤
You’re welcome 😊
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 😊
Amazing one😊
Thanks 😄
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 we tell me which extension you use for responsiveness check 3:51:26
Link is in the description 👌
i have started to build
good luck with me
Good luck 😊
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 😊
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....
Can you tell me which tols you have used for responsitive testing . that showing on right side.
Check the description 😊
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
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👍
Any way we can get access to the finished repo?
Not yet - have some ideas in mind for giving access in the future ☺️
anyone able to share a complete version on github? I did it but its abit off for me. thanks
Can you build a portfolio website for a frontend developer
Stay tuned - this one might be coming soon 😉
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
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
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 😞
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)
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.
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 👍
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 💯✅❤️💖
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?
what browser r u using...
Link in the description 😎
@@frontend-tribe it's premium version ig...
Where can we purchase the source code?
No source code for that one, sorry
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 !!
bro is not pregnant but never fails to deliver
😆 too good
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 :)
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 👍
Chrome extension name for device ?
It’s the polypane browser - check the link in the description 😊
lottie is not free right?
Some parts of Lottie aren’t free, but you can do most basic things for free 👍
*Quality* content ❤
Thanks - glad you're enjoying it!
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 😀😀😀
The files can't be downloaded
Send an email to support@frontendtribe.com and we can help you out
is there any way to get source code
I show you how to build it in the video 😊
Please I want this font name
Bricolage Grotesque 👍
Can anyone please share the completed code?
No completed code for this one, sorry
Never learn this in US Universities!
I know - that’s one of the problems with college for learning tech 😔
Source code
Maybe in the future - stay tuned 👍
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? 😄
Hi great work but i get this error after i run the npm run dev command
Build Error
Failed to compile
Next.js (14.2.5)
./src/app/layout.tsx
Error:
× Unexpected token `html`. Expected jsx identifier
╭─[/Users/aac/Desktop/AI Startup Landing Page - Frontend Tribe/frontend-tribe-ai-startup-landing-page-template/src/app/layout.tsx:15:1]
15 │ children: React.ReactNode;
16 │ }>) {
17 │ return (
18 │
· ────
19 │ {children}
20 │
21 │
╰────
Caused by:
Syntax Error
🤔 hard to say - nothing looks wrong there
There is an extra tag
@@qpandrei01 Thats it, thx
i am not reciving the bundle email :( from your web
If you’re still having trouble, reach out to support@frontendtribe.com 💪
@@frontend-tribe nope not there no mail 😭
Awesome tutorial❤ but can you please make a tutorial on framer motion
Awesome tutorial❤ but can you please make a tutorial on framer motion
This might be coming soon - keep an eye out 😉