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

🚀 Build a sleek and gorgeous 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!

You’ll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder. We’ll use GSAP to add wonderful animations to our site, both on page load and on scroll. We’ll also use Tailwind CSS to style the super polished website.

We’ll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and I’ll walk you through everything you need to know.

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,

🔗 Docs and Resources – https://prismic.notion.site/Prismic-Next-js-Course-Resources-9eda931a8b3743b9b3aaf0b7a561403b?pvs=74
🔗 Live Demo – https://glisten-ai.vercel.app/
🔗 GitHub repo – https://github.com/a-trost/glisten-ai

– – –

📍 Chapters:
00:00:00 – Intro – Marketing Website with Nextjs 14
00:01:50 – Project Rundown
00:08:21 – Create Next.js site with Prismic
00:19:46 – Install Tailwind CSS
00:25:20 – Add Font
00:36:33 – VSCode Extensions for Next.js
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