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

Описание: 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:   / frontend_fyi   &   / jeroenreumkens  
👨‍🏫 Check my mentorships: https://www.jeroenreumkens.nl/mentoring

Other videos mentioned:
📺 Using REM instead of pixels:    • Why You Should Use REM Instead of Pixels  
📺 Page animations with Next.js:    • Adding Route Transitions to Next.js 13 wit...  
📺 Writing component variants with CVA:    • Large Tailwind Components — What to do Abo...  

🔗 Source on Github: https://github.com/frontendfyi/rebuil...
👀 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