Part 1: Rebuilding Linear's Homepage with Next.js and Tailwind

Video Description

This video is part of a multi part series in which we are going to rebuild Linear's homepage with Next.js 13 and Tailwind. Part one is all about setting up Next.js and Tailwind, and creating the main page structure, the main navigation (including a nice animation on mobile), and the footer. In the next parts we will also be adding more animations with Framer Motion. 👀 Timestamps 00:00 - Intro 01:53 - Setup Next.js 02:18 - How we're going to build this 02:53 - Start building 05:01 - Empty page shell 05:32 - Container component 06:15 - Using REM values for sizing 07:06 - Hero component 19:57 - Header and main navigation component 29:02 - Button component with CVA 39:46 - Mobile version of header and navigation 49:36 - Making sure the desktop navigation works again as well 51:28 - Adding animation to the navigation 56:10 - Footer component 01:04:17 - Making the footer component responsive 01:05:45 - Outro 💬 Join us on Discord: https://www.frontend.fyi/discord 🐦 Follow me on Twitter: https://twitter.com/frontend_fyi & https://twitter.com/JeroenReumkens 👨‍🏫 Check my mentorships: https://www.jeroenreumkens.nl/mentoring Other videos mentioned: 📺 Using REM instead of pixels: https://youtu.be/pKX7YnkyR8g 📺 Page animations with Next.js: https://youtu.be/GksAsutVXOA 📺 Writing component variants with CVA: https://youtu.be/B6FrDu2Qbt0 🔗 Source on Github: https://github.com/frontendfyi/rebuilding-linear.app 👀 Preview of what we've build so far: https://rebuilding-linear.vercel.app/ Tools mentioned: 🔗 Class Variance Authority: https://github.com/joe-bell/cva 🔗 Tailwind: https://tailwindcss.com 🔗 Linears website: https://linear.app #linear #react #css #tailwind #cva #classvarianceauthority