Build a Dark Modern Animated Website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScript

In this fun course, we will make a trendy, dark, and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more!

At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients,

- - -

📍 Chapters:
00:00:00 - Intro - Marketing Website with Nextjs 14
00:01:50 - Project Rundown
00:19:46 - Install Tailwind CSS
00:25:20 - Add Font
00:29:28 - Create Settings custom type
00:37:08 - Creating Header and footer
01:08:59 - Building the Hero Slice
01:34:46 - Bento Box Slice
02:02:59 - Showcase Slice
02:33:21 - Case Studies Slice
03:42:30 - Call to Action Slice
04:04:44 - Deploy to Vercel
04:09:42 - Revalidation
04:13:24 - Add live preview URL (visual editing)
04:17:22 - Hero Section Animation with GSAP
05:09:51 - Integration Slice Animation
05:23:02 - SEO Check and Polishing

- - -

#nextjs #tailwindcss #gsap

[TrostCodes]

I love this style of site and knew we had to build one together! I'm excited to see what you build and how you customize it to be your own! There's a bunch of great GSAP and Tailwind techniques to learn here, in addition to the solid foundation of Next.js and Prismic.

Please share your final site, I'd love to see it!

[arielelias]

Yes, this kind of modern designs we need in our develop community. Thx so much. We are specting for the next one!

[angelDova_]

Loved the video and the Gsap. Def recommend using more of it in your future videos!

[peruvianidol]

Nice job, Alex! I was riveted the entire 5.5 hours. ♥

[SItgix]

really nice tutorial. so nice that i build it twice in a week just to deepen the concepts, please more of this and please more gsap stuff !

[irfansaeedkhan]

this is epic, wow finally some one setting the top notch benchmark

[karan_s]

Really informative video, its my first time exploring a cms with nextjs . I hope we will get more such videos!

[quentmadeit]

I followed the portfolio video and love it! I'm really excited to see you guys are making another site! Please keep making these video, they are really helpful for learning how to put together a future proof website.

[jeandesauw]

This tutorial is very interesting for the interactive and modern design it teaches you to build, but on top of that, it introduced me to Prismic: a tool I've been missing for my freelance web design work!
Thank you so much! I'll be recommending and using this technology!

[Yesterday_i_ate_rat]

Thanks for this project, I'm going to adapt this design in a personal portfolio way

[neeshsamsi]

More GSAP definitely. Really uplifts the experience. Would love some dedicated time on that

[JustPerfectDesigns]

Awesome tutorial. Thank you.

Quick one, please what's your vscode font and theme? I really love it

[hazard-funk]

Very helpful tutorial!
I though some materials were gonna be behind a paywall but NO! its right there for FREE!?!?
Amazing job making this tutorial.

[Karthikmohan]

very helpful. more, more, more gsap please..

[AjaySingh-jzqx]

Mind blown after watching the tutorial

[briananderson]

I've never used a CMS quite like Prismic before, but this tutorial was great! I will definitely use this to create my own portfolio website so that I can make updates and changes on the fly to the content and have it go out immediately. One question I have is can I integrate custom components into my Prismic project or does everything have to be done via slices? For example, if I wanted to have some static content that wasn't controlled by Prismic how would I do that? Maybe just an empty slice with my custom components?

[zainuldin]

Thank you for nice tutorial. please can you cover how to make vercel glob animation in which they may use svg path animation.

[luizricardo.design]

Amazing tutorial! I would like to make a suggestion for the next one in NextJS, as you are using it in conjunction with GSAP, you could add preload and page transition, in a project I was working on I couldn't do it with the Prismic API due to the server.

[vijaymohansrirangam]

which theme do you use for your vs-code?

[FreeTrial]

I make this website full after that I fell like a developer and thank you man, please make more unthoughtful project like that