Create a stunning luxury website with Next.js 15, GSAP, Prismic, and TypeScript! Full Course 2025

📍 Part 2 is now available:    • Create a stunning luxury website with Next...   In this stylish and engaging course, we’ll build a sleek, animated landing page for a fictional luxury cologne brand called Côte Royale. You’ll learn how to use the latest features of Next.js 15, Prismic’s Headless Page Builder, and GSAP to craft beautiful scroll and entrance animations that feel elegant and premium. We’ll focus on clean architecture, smooth transitions, and subtle visual storytelling: designing sticky sections, animated typography, and a high-contrast, modern layout. You’ll also use Tailwind CSS to handle responsive styling with ease and deploy the finished site on Netlify. This course is perfect for developers who want to create an impressive portfolio piece with top-tier tools and techniques. Let’s make something that looks as good as it runs. 🔗 Course Resources: https://prismic.io/courses/animated-l... 🔗 Final Repository: https://github.com/prismicio-communit... 🔗 Live Site: https://coteroyalecourse.netlify.app/ 📍 Chapters: 00:00 Welcome to the Next.js Prismic Course 02:27 Resources walkthrough 04:35 Nextjs Project and Slice Machine init 09:33 Create Homepage type and Doc in the repo 18:06 Create Hero slice-add Content to slice-show Code Snippets 30:07 Initial styling of hero - created bounded component - installed clsx 50:28 Add Fonts 55:26 Install GSAP & Overview 01:08:50 Create Reusable Fadein Content 01:22:41 Start of Reveal Text Component 01:23:04 Build out Reveal Text Component and add to Hero 01:35:45 Reveal text component timing customized in hero 01:36:27 hero - fix spacing between heading lines 01:38:06 point out issue with accessibility in hero animations 01:38:58 show gsap match media in the gsap docs 01:40:29 Accessibility 01:46:01 Footer and Nav Bar 01:56:01 Fix hero being covered by nav bar 01:56:38 Scroll text slice - we started and finished it 02:30:42 Remove markers from scroll text slice 02:31:02 Reveal text component- add a space between words 02:31:54 Create fragrance page type and add Ignis to prismic content 02:39:37 Create model for Product Feature slice 02:42:54 Style out entire product feature slice 03:11:05 Add scrolltrigger to fade in component 03:13:38 Fragrance List + Display 03:36:55 Create Fragrance Attributes component 03:47:49 Add other fragrances - tweak animations 03:51:31 Call to action and add scroll trigger to reveal Text component 04:09:33 Create video slice and begin to lazy load it 04:16:44 Add lazy loading to video 04:27:20 Fragrance page main section and routing lesson 04:47:27 Other fragrances component for fragrance page 04:59:18 Create settings custom type and enter data into prismic 05:05:42 Add metadata to layout component 05:11:25 Finishing the Navbar 05:33:39 View transitions 05:57:36 Deploy to Github 06:00:31 Deploy to Netlify 06:03:42 Set up page and slice previews and revalidating data 06:13:48 Adding the cote-royale-prismic GitHub Topic 06:15:19 Set up Page and Slice Preview 06:16:01 Thank you! See you in part 2! --- #nextjs #gsap #prismic