Create a Stunning Dark Theme SaaS Landing Page: Frontend Dev Tutorial

[@Yesterday_i_ate_rat]

It's almost illegal to watch such an outstanding tutorial for free! Absolutely mind-blowing work

[@kimnamjomserk5190]

Rare to see someone manually making FAQS instead of using a pre-build components 🐐

[@afifarfan244]

I finally finished the project in five working days. I learned a lot about Tailwind from this, and I also explored animation ideas using Framer Motion. Thanks!

[@senlee325]

Learned so much from this tutorial. Took me 3 days. I took notes as well.

[@MaxJM711]

I'm not going for webdev but I have a great interest in making things feel and be my own so I've been wanting to make a portfolio website for some time now (really liked Vue and Nuxt so far!). The quality in this tutorial is INSANE, I legit thought you had over 10k subs. Best of luck with every project one, really looking forward for more content!

[@frontend-tribe]

Amazing feedback, thanks! Working on the 10k subs 😂

[@shubham___gupta]

1:10:58 In case anyone is getting error while reloading the page , paste 'use client' at the top of the page. It will be fixed. (it happens until you give the width & height to image element)

[@shubham___gupta]

1.30 AM night time here in india , finished entire video. Learnt a lot from this video & really appreciate the detailed explanations throughout. Please keep integrating framer-motion techniques for future builds. It really make the components come to life. 😄👌

[@shubham___gupta]

Also , in last section , getting a console warning for some reason(Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly). Fix : in global.css , add html{position:relative}

[@paropriya3525]

@@shubham___gupta hey shubham , im a noob in web dev try hard to fix an error in this project but failed can you please give me your whatsapp number for consulting? if you dont mind ...

[@aluexpress987]

Your voice has relax sensation dude.❤

[@hammadafzal4114]

We need more projects like this, also we need a project where tailwind config file setting and best practices are covered. Furthermore, how to plan a project where you need to convert figma to pixel perfect code

[@frontend-tribe]

Appreciate the feedback. I’ll have to cover those in future videos 👍

[@SK_Covers]

Man , so far this is the best beginner friendly tutorial on youtube. Who are all knows basic knowledge of react, typescript and tailwind css it'll be really helpful. Very organised and well code structure, production grade stuff❤ In future add Dashboard ui tutorial in your bucket list 🎉 Love from India 🙏❤

[@frontend-tribe]

Thanks for the detailed comment - glad you’re enjoying the videos 😊

[@cape_YT_]

Amazing 👏🏻 🔥 Would also like a portfolio website with sleek animations and transitions like this also the same theme and vibe. Great work.

[@frontend-tribe]

Great suggestion! I’ll keep that in mind.

[@mirjalol_nightmares]

style looks like JS MASTERY channel, but loved it. cool bro

[@NJ-gh7iw]

Best explanation throughout the video. Please we neer more videos like this. ❤

[@frontend-tribe]

More to come! 😁

[@mileslegend]

this is amazing ...where have you been guys all thisa time

[@joseg0nzz]

Hey there 👋🏽 I just started the tutorial but gotta say. This is good content, keep it up!

[@valentimgarcia6179]

What a nice tutorial and project. Keep up with this amazing work!!

[@fres-space]

damn bro, i didn't finish the whole tutorial but it looks sick to me, keep it up. Btw i've got the same issue with the email

[@frontend-tribe]

Try again. Should be fixed now 😅

[@hibijibii]

@@frontend-tribe not fixed yet...

[@Uche_Agwu]

Thanks so much, I really appreciate this, now on to the next project.

[@frontend-tribe]

Glad you enjoyed it 😀

[@multiverse915]

Amazing brother keep going and upload this type of content bring more landing pages like this 🤭🤗 absolutely love the tutorial

[@frontend-tribe]

Thanks! Will do!

[@faizanqureshi3792]

Wow this is an amazing projects, plz make more projects tutorial like this! 🥺

[@frontend-tribe]

Thank you! Will do!

[@altaccount3712]

Love your choice of fonts

[@user-wy3br1zh2f]

Love your work man🎉❤

[@frontend-tribe]

Thank you very much 😀

[@redhood7105]

That's very good video as a whole and also as a reference for an individual componenst. Thanks

[@frontend-tribe]

Glad it was helpful!

[@king_braiin]

Thanks man, this is truly an amazing piece.

[@SaiTeja-ir7yv]

For anyone who was not able see the gradient color background at 14:56, add a custom template to tailwind config module.exports = { theme: { extend: { backgroundImage: { 'custom-gradient': 'linear-gradient(to right, #FCD6FF, #29D8FF, #3FFFD8, #3F89AB, #FCD6FF)', }, }, }, plugins: [], }; And then use it like this export const Banner = () => { return ( Explore the demo ); };

[@dharsanr6504]

what is the font that you are using in this project

[@DarkAcademyUniversity]

Really good videp! Subscribed!

[@panociagasta]

Very cool tutorial

[@frontend-tribe]

Glad you liked it

[@GlenMiracle-pc9yh]

now this is insightful 👏

[@Aman_yadav1419]

Start uploading this kind of content ❤

[@ashutosh_tiwari]

Thanks bro for this cool project.

[@w3mw]

Subscribed and getting all notes when you upload new videos, amazing content creator thank you! What kind of browser do you use? Really cool to just put it to the right and can change easy from mobile to tablet and desktop? 😄

[@frontend-tribe]

Thanks for the kind words! The browser is responsively.app ☺️

[@xiztspike81]

Thanks! ♥

[@erjuano4797]

Good Video, I've enjoy all. Would you do a video about good practices about developing frontend with nextjs/React?

[@frontend-tribe]

That’s a good idea 👍

[@maile8766]

thank you for the tutorial!! please also share the git repo so its easier for us to follow

[@aniketravi8025]

Can you please let me know which browser you are using? I really enjoy your video, you are amazing!

[@frontend-tribe]

Thanks! Browser is responsively.app ☺️

[@ulisesjesse7690]

Hi, I can't download the resources to get started because I haven't received the email. I hope you can help me!

[@AGUILASDELZULIA]

Same here, where are the resources?

[@mohammadabbas1623]

This is beautiful

[@sahilverma_dev]

Greate video sir Subbed

[@frontend-tribe]

Much appreciated!

[@itsmesuraj20]

Want more videos like this , Got my first client on upwork ...

[@frontend-tribe]

That’s awesome! 👏 👏

[@irfansaeedkhan7242]

nice nice nice this is actual value

[@jeffkirchoff14]

Great Content

[@rob4114]

You are the fucking shit, I can't thank you enough for this 11/10 tutorial

[@frontend-tribe]

Really appreciate the kind words. Happy I could help!

[@BakerMiloudi]

Hi! your tutorial has been extremly useful and helpful so thanks alot for that! i have a question though, what is the name of the extension to show you the responsive layout (that phone tablet pc thing) i definetly will need it, thanks!!

[@frontend-tribe]

Yeah, that’s responsively.app 👍

[@itzindiandude]

Great 🔥🔥

[@jamesholland6140]

the folder is not downloading even after entering multiple emails...can you help me

[@thenotorious7692]

Start uploading this kind of content please

[@eekrain]

What browser do you use to preview the design? looks neat

[@frontend-tribe]

responsively.app

[@naolfekadu6101]

Thank you

[@shifaak9734]

Can we have more like this ❤ with optimization explanation please 🥺

[@lineupp]

Awesome content. Which browser it is ?

[@frontend-tribe]

Responsively.app

[@hmefx9251]

Awesome project. I tried to get the starter files but I haven't received any mail yet also I checked the spam folder as well but no mail.

[@frontend-tribe]

Thanks. Usually it’s just because it went to spam…

[@hmefx9251]

@@frontend-tribe sorry, but I didn't received the mail in spam also

[@MazilKhatib-o4b]

which font you are using in video?

[@X-BLADE-77]

can you please fix the issue regarding downloading the assets, I'm frustrated because of the CSS, you will know as you are also a developer !

[@broskisnajdy]

Hello, great video. Can I ask you please how you did the intro? :) Is it premiere pro? Thanks!

[@frontend-tribe]

I use Final Cut, but your choice of editing software doesn’t matter all that much. I could have done the same thing with Premiere 😊

[@Deus-lo-Vuilt]

Nice proyect, like and sub

[@doyaltv2030]

nice your voice

[@aazertyiop7777]

Hello, thanks for these high-quality videos! However, where did you get all these illustrations (for free, if possible)?

[@frontend-tribe]

Check out the description 👍

[@lala-wb7gi]

stunning design,Could you please tell me what you are using the browser for, bro?

[@frontend-tribe]

That’s responsively.app if I understood you correctly 😊

[@lala-wb7gi]

@@frontend-tribe hah You understand me correctly, thank you

[@bluetechadmin]

Need a react project as simple

[@oussamaelhousni5665]

New subscriber here

[@coder3145]

Could plz tell me how to get figma design for it

[@leanprogrammer]

Amazing work! PS: Can you please explain how you translate the figma gradients to css? I'm digging into the figma file but I am a bit confused

[@frontend-tribe]

They’re kind of tough tbh - I look at the colors and estimate the percentages

[@leanprogrammer]

@@frontend-tribe No worries man. Thanks a ton for these videos - conversion of our products are going to go through the roof 😆

[@ibadshaikh2215]

Awesome. Please anyone share the final code link.

[@DarkAcademyUniversity]

The intro is like from JavaScript Mastery

[@DarkAcademyUniversity]

Please, make more!

[@frontend-tribe]

Working on the next one 😊

[@DarkAcademyUniversity]

@@frontend-tribe waiting :)

[@rupakswar491]

assets link is not working please help

[@mashuktamim]

What is the font you used in the introduction section?

[@frontend-tribe]

Bricolage Grotesque ☺️

[@mashuktamim]

@@frontend-tribe Thanks a lot

[@AGUILASDELZULIA]

Thanks for this amazing tutorial, but when I tried to start to work with it, I figure out that the resources are missing (even I filled my name/email in your landing page)... Help?

[@Ritzeeeee]

Same issue, not receiving any resource even after submitting the form

[@kunalyadav7236]

Amazing video, but im not able to download assets, i submitted the form and it says form filled but nothing happens after that

[@frontend-tribe]

Sorry to hear that - shoot a message to [e-mail]

[@NoTimeWaste1]

Hey bro, can you also share the commands which were used to create initial folder setup.

[@frontend-tribe]

Just use the 📁 that you can download :)

[@KimJune-x2s]

Hey friend how to get the starter file? I could not find in your description

[@frontend-tribe]

Hey @user-je8pc9km9f - it's there now 😅

[@KimJune-x2s]

@@frontend-tribe hello I tried to submit many times and could not receive any email from yours. Could you please check it , thanks a lot for your time and tutorials

[@amit.masram]

Sir download the source code not retrieving , Please help

[@frontend-tribe]

Sorry to hear that. Shoot an email to [e-mail] and I’ll make sure you get the files 👍

[@mdfarhan-ni7dy]

Why you didn't make navbar menu toggle in mobile view 😢

[@frontend-tribe]

Thought I’d leave something for you to do 😉

[@sohamchakraborty1028]

how can i get the format of of the browser or whatever u opened at the right side of vs code for seperating the mobile tablet and desktop view?

[@frontend-tribe]

Just used Responsively.app and set the views to be the same sizes as in the design 😊

[@UjjwalMishra_68]

Please do one on react also

[@frontend-tribe]

I’ll have to add that to the list ☺️

[@w3mw]

Trying to fix the logoTicker animation, looks good on mopbile and tablet, but when i go to desktop it doesnt seems to work correctly, like before you added one more map for images. How can I fix that?

[@frontend-tribe]

Hard to debug over KZbin comments 😅. Stay tuned for more community features like coding help 👍

[@w3mw]

@@frontend-tribe Haha yeah i get it sorry mate. Would you like to build a cool ladning page for a football team? (soccer) whould be really cool to see, I'm am a passionate fan of football thats why I ask :D

[@LucasRaphael-nl9pm]

where do I find this file that he transferred to vscode at the beginning of the video? what file is this?

[@frontend-tribe]

It’s part of the resources bundle you can download from the link in the top of the description. Includes the full template, images, everything 😊

[@RwiiinZakeri]

i can't download resources , in the website i fill the user name and email and the success message appear but nothing download for me

[@frontend-tribe]

Check your email 😊

[@naolfekadu6101]

why can't we get the end result?

[@frontend-tribe]

It shows you how to build it 😄

[@okwarakizitochigozirim6107]

great tutorial, I'm trying to download the starter files but I'm not getting an email sent to me

[@frontend-tribe]

Did you check your spam folder?

[@osarolawani3739]

what browser are you using?

[@frontend-tribe]

Responsively.app 👍

[@heruuu6114]

cool🥶

[@hibijibii]

after submitting email web can't letting me download starter template. can you recheck please?

[@frontend-tribe]

Shoot a message to [e-mail] with your details.

[@mohammedhamza5242]

Whats the browser that you are using? Is it Polypane?

[@frontend-tribe]

It’s not - it’s called responsively. Free and open source ☺️ responsively.app

[@mohammedhamza5242]

@@frontend-tribe Thanks 😊

[@RahulShinde-xs9rl]

Which web browser you used?

[@frontend-tribe]

Responsively.app 👍

[@lofinothing]

i didn't receive the email to retrieve the material

[@frontend-tribe]

Shoot an email to [e-mail] and we can help you out

[@Eadev44]

I can't download the starter files

[@frontend-tribe]

Shoot a message to [e-mail] - I’m sure we can help you out

[@sulavbaral9972]

Is that an extension for mobille tablet and desktop

[@frontend-tribe]

It’s responsively.app 👍

[@rogercardona4160]

Does anyone know which NextJs version is he using?

[@frontend-tribe]

Next 14.2.4 👍

[@Abdul_moiz31]

I am not able to find the assets could anyone tell me where to find one

[@frontend-tribe]

Assets should be included in the resource bundle 👍

[@kdaray8010]

Why can't I get Download your FREE resource bundle through my email?

[@frontend-tribe]

Good question. Hard to know without knowing your email. Shoot a message to [e-mail] if you continue having issues 👍

[@ayuvcode]

I am not receiving the starter template through mail Please provide solution.

[@blackhaws]

You have to wait a while for the email to arrive

[@ayuvcode]

@blackhaws received

[@b3holdd]

Is it possible to implement this in vanilla html css

[@frontend-tribe]

Absolutely. Just did it in Next.js and React to help teach those technologies too

[@DashingChannel]

Hello Sir, I am having trouble signing in to your website

[@frontend-tribe]

Shoot a message to [e-mail]

[@JosephKinyuru-mo4nu]

The download resources is not working

[@frontend-tribe]

Sorry to hear that. Shoot an email to [e-mail] if you can’t find it in spam

[@lokeswaranaruljothy8100]

I have submitted the resources form multiple times, but I did not receive anything in my mail

[@frontend-tribe]

Send an email to [e-mail] - someone can help you out there 😊

[@safkatsadli1374]

i gave my email and my name still got no resources , what should i do now?

[@frontend-tribe]

Shoot an email to [e-mail]

[@ad_mastermind1313]

Ask your thumbnail font family please 🙏

[@justiceessiel6123]

would like the link to the figma file itself so I build without watching the video after watchig the video

[@frontend-tribe]

That’s part of the resource bundle - check the description ☺️

[@paropriya3525]

please dont skip projrct creating part because i dont know how to create a next js project and your resources files are delivered to inbox

[@frontend-tribe]

Sorry to hear that. Shoot an email to [e-mail] and we can help you out