Video series · 13 parts
Landing Page Design with Next.js & Tailwind
A 13-part tutorial building a travel agency landing page with Next.js and Tailwind CSS, section by section.
- Part 1
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 1
I build the hero section of a travel-agency landing page with Next.js, TypeScript, and Tailwind, starting from a blank create-next-app and finishing with a styled, accessible hero. I set up reusable Container and Icons…
- Part 2
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 2
I build the benefits section of a travel agency landing page with Next.js and Tailwind, turning a badge, headline, four icon benefits, and a central stock image into the final layout. I create reusable HeadingLabel and…
- Part 3
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 3
I build the featured destinations section of a travel agency landing page with Next.js and Tailwind, covering the card grid, pricing overlays, carousel arrows, and final background treatment. I create a…
- Part 4
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 4
I continue building the travel agency landing page with Next.js and Tailwind, adding a special offers section and a multi-card more offers section. I fix an icon casing error, extract a reusable SectionHeading and…
- Part 5
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 5
I build a horizontal sliding animated offers section for a travel agency landing page with Next.js and Tailwind CSS, using a reusable component and icon-based offer data. I show how to render duplicate offer lists…
- Part 6
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 6
I build the Featured Travel Essentials product grid for my travel agency landing page with Next.js and Tailwind CSS. I create a new products.tsx section, reuse my heading label component, and render four products —…
- Part 7
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 7
I build the animated customer reviews section of my Next.js and Tailwind travel agency landing page by extracting the scrolling marquee I already used for the office section into a reusable Slider component. I generate…
- Part 8
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 8
I build the social section of my Next.js and Tailwind travel agency landing page, turning four destination photos into a hover-reveal grid with Instagram labels and an “Explore more” button. I create a reusable Social…
- Part 9
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 9
I finish the travel-agency landing page by building a dark slate footer with a newsletter signup, social links, quick-link columns, copyright, and a back-to-top button in NextJS and Tailwind. I reuse the PrimaryButton…
- Part 10
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 10
I finish the travel-agency landing page by building a dark slate footer with a newsletter signup, social links, quick-link columns, copyright, and a back-to-top button in NextJS and Tailwind. I reuse the PrimaryButton…
- Part 11
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 11
I make the Travel Buddy travel-agency landing page responsive with Next.js and Tailwind, starting from the broken desktop-only build and turning it into a mobile-first layout. I add a 480px extra-small breakpoint…
- Part 12
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 12
I finish making my Next.js and Tailwind travel agency landing page fully responsive, working through the offers, more offers, scrolling offers, products, and reviews sections. I replace rigid grids with flex-wrap…
- Part 13
Watch →YouTubeLanding Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 13 (final part)
I finish the travel agency landing page by making the social proof, CTA, and footer sections fully responsive in Next.js and Tailwind. I use flex-wrap, responsive gaps, min/max widths, and centered justification to…
Dude, you’re at the bottom of my landing page.
Just book a call already if you’re that interested.
You scrolled all the way here.