Это видео недоступно.
Сожалеем об этом.
Create a Stunning Dark Theme SaaS Landing Page: Frontend Dev Tutorial
HTML-код
- Опубликовано: 16 авг 2024
- 🚨🚨 Download your video resources here 👇: 🚨🚨
lp.frontendtri...
In this video, you'll level up your front-end development skills to help you land your dream job! Discover how to create a stunning dark SaaS landing page with Next.js and Framer Motion. From structuring your layout to adding smooth animations, I'll guide you through the entire process step-by-step. By the end, you'll have a next-level landing page to showcase in your portfolio, guaranteed to impress potential employers.
In this video, you'll learn:
- Next.js Fundamentals: How to structure and build a modern, responsive SaaS landing page using Next.js, focusing on its powerful features for creating high-performance React applications.
- Framer Motion Animations: How to integrate and use Framer Motion to add smooth, professional-looking animations that enhance user experience and bring the landing page to life.
- Dark Mode Implementation: Techniques for designing and implementing an appealing dark mode interface, including color scheme selection and accessibility considerations.
🕐 Timestamps:
00:00 - Introduction
01:38 - Build Preview
03:00 - Getting Started
07:47 - Banner Component
18:31 - Navbar Component
33:55 - Hero Section
1:02:26 - Logo Ticker Section
1:18:20 - Features Section
1:31:19 - Product Showcase Section
1:37:06 - FAQs Section
1:53:08 - Call To Action Section
2:06:12 - Footer Section
2:14:48 - Hero Animation
2:20:10 - Logo Ticker Animation
2:26:43 - Features Animation
2:41:43 - Product Showcase Animation
2:50:50 - FAQs Animation
2:55:40 - Call To Action Animation
👉 Subscribe for more great frontend dev content:
/ @frontend-tribe
🌐 Visit our website:
frontendtribe.com
#frontenddev #nextjs #framermotion #saaslandingpage #webdevelopment #codingtutorial #developers
Frontend Tribe is on a mission to transform 10,000 lives through front-end development mastery!
Attribution Disclaimer: Design adapted from 'SaaS Website UI Kit - Framer Website Kit' by Framer: figma.com/comm...
It's almost illegal to watch such an outstanding tutorial for free! Absolutely mind-blowing work
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
Appreciate the feedback. I’ll have to cover those in future videos 👍
Your voice has relax sensation dude.❤
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!
Amazing feedback, thanks! Working on the 10k subs 😂
this is amazing ...where have you been guys all thisa time
style looks like JS MASTERY channel, but loved it. cool bro
You are the fucking shit, I can't thank you enough for this 11/10 tutorial
Really appreciate the kind words. Happy I could help!
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)
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. 😄👌
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}
Amazing 👏🏻 🔥 Would also like a portfolio website with sleek animations and transitions like this also the same theme and vibe.
Great work.
Great suggestion! I’ll keep that in mind.
What a nice tutorial and project. Keep up with this amazing work!!
Hey there 👋🏽
I just started the tutorial but gotta say. This is good content, keep it up!
Wow this is an amazing projects, plz make more projects tutorial like this! 🥺
Thank you! Will do!
thank you for the tutorial!! please also share the git repo so its easier for us to follow
Thanks man, this is truly an amazing piece.
Love your choice of fonts
Very cool tutorial
Glad you liked it
Amazing brother keep going and upload this type of content bring more landing pages like this 🤭🤗 absolutely love the tutorial
Thanks! Will do!
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? 😄
Thanks for the kind words! The browser is responsively.app ☺️
Really good videp! Subscribed!
Love your work man🎉❤
Thank you very much 😀
That's very good video as a whole and also as a reference for an individual componenst. Thanks
Glad it was helpful!
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
Try again. Should be fixed now 😅
@@frontend-tribe not fixed yet...
Thanks bro for this cool project.
now this is insightful 👏
Thank you
This is beautiful
Awesome content. Which browser it is ?
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!!
Yeah, that’s responsively.app 👍
Start uploading this kind of content ❤
nice nice nice this is actual value
Want more videos like this , Got my first client on upwork ...
That’s awesome! 👏 👏
Awesome. Please anyone share the final code link.
Great Content
Start uploading this kind of content please
The intro is like from JavaScript Mastery
Great 🔥🔥
thx bro
You’re welcome
Greate video sir
Subbed
Much appreciated!
Can you please let me know which browser you are using? I really enjoy your video, you are amazing!
Thanks! Browser is responsively.app ☺️
Hello, thanks for these high-quality videos! However, where did you get all these illustrations (for free, if possible)?
Check out the description 👍
Hello, great video. Can I ask you please how you did the intro? :) Is it premiere pro? Thanks!
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 😊
Can we have more like this ❤ with optimization explanation please 🥺
Nice proyect, like and sub
What browser do you use to preview the design? looks neat
responsively.app
Amazing video, but im not able to download assets, i submitted the form and it says form filled but nothing happens after that
Sorry to hear that - shoot a message to support@frontendtribe.com
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
Check your email 😊
I mean it's alright still a load to work on.
Sir download the source code not retrieving , Please help
Sorry to hear that. Shoot an email to support@frontendtribe.com and I’ll make sure you get the files 👍
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?
Hard to debug over RUclips comments 😅. Stay tuned for more community features like coding help 👍
@@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
where do I find this file that he transferred to vscode at the beginning of the video? what file is this?
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 😊
New subscriber here
Why you didn't make navbar menu toggle in mobile view 😢
Thought I’d leave something for you to do 😉
why can't we get the end result?
It shows you how to build it 😄
cool🥶
Please, make more!
Working on the next one 😊
@@frontend-tribe waiting :)
I can't download the starter files
Shoot a message to support@frontendtribe.com - I’m sure we can help you out
I have submitted the resources form multiple times, but I did not receive anything in my mail
Send an email to support@frontendtribe.com - someone can help you out there 😊
i didn't receive the email to retrieve the material
Shoot an email to support@frontendtribe.com and we can help you out
would like the link to the figma file itself so I build without watching the video after watchig the video
That’s part of the resource bundle - check the description ☺️
Ask your thumbnail font family please 🙏
What is the font you used in the introduction section?
Bricolage Grotesque ☺️
@@frontend-tribe Thanks a lot
Why can't I get Download your FREE resource bundle through my email?
Good question. Hard to know without knowing your email. Shoot a message to support@frontendtribe.com if you continue having issues 👍
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?
Just used Responsively.app and set the views to be the same sizes as in the design 😊
Please do one on react also
I’ll have to add that to the list ☺️
The download resources is not working
Sorry to hear that. Shoot an email to support@frontendtribe.com if you can’t find it in spam
Hey friend how to get the starter file? I could not find in your description
Hey @user-je8pc9km9f - it's there now 😅
@@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
Hey bro, can you also share the commands which were used to create initial folder setup.
Just use the 📁 that you can download :)
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.
Thanks. Usually it’s just because it went to spam…
@@frontend-tribe sorry, but I didn't received the mail in spam also
Is that an extension for mobille tablet and desktop
It’s responsively.app 👍
stunning design,Could you please tell me what you are using the browser for, bro?
That’s responsively.app if I understood you correctly 😊
@@frontend-tribe hah You understand me correctly, thank you
after submitting email web can't letting me download starter template. can you recheck please?
Shoot a message to support@frontendtribe.com with your details.
i gave my email and my name still got no resources , what should i do now?
Shoot an email to support@frontendtribe.com
great tutorial, I'm trying to download the starter files but I'm not getting an email sent to me
Did you check your spam folder?
Which web browser you used?
Responsively.app 👍
Hello Sir, I am having trouble signing in to your website
Shoot a message to support@frontendtribe.com
Whats the browser that you are using? Is it Polypane?
It’s not - it’s called responsively. Free and open source ☺️ responsively.app
@@frontend-tribe Thanks 😊
what browser are you using?
Responsively.app 👍
Is it possible to implement this in vanilla html css
Absolutely. Just did it in Next.js and React to help teach those technologies too
Hyy bro please give me your video thumbnail font family name and give me zip file possible
Check out bricolage grotesque 👍
github ??
Not for this one, sorry 🤷♂️
share source code 😁
Good idea
Same here, I gave you 2 tries with 2 different email, I didn't receive anything
Shoot a message to our support channel: support@frontendtribe.com