Let's build a landing page for a game using Reactjs, Nextjs and TailwindCSS

2 years ago
31

Welcome,

In this video, we are going to build a landing page for a game, Life in the Machine, using Reactjs, Nextjs and TailwindCSS.

Life in the Machine is a detective game, which involves crime investigation and solving murder mystery by interrogating suspects, exploring crime scene, finding clues and finally finding the murderer.

Website page - https://shepherdgames.vercel.app/games/litm
Get the game:
Android - https://play.google.com/store/apps/details?id=com.shepherdgames.lifeinthemachine
Windows - https://shepherdgames.itch.io/lifeinthemachine

By the end of this video you will be able to build your own landing page. This tutorial covers below topics
1. Adding images
2. Adding YouTube videos using iFrame
3. Using Flex box
4. Adding hyperlinks
5. Adding Play Store and itch.io game badges

Chapters
00:00 Introduction
03:23 Setting up the NextJS project with TailwindCSS
04:28 Setting up custom font
10:31 Setting up the page title and favion in the Head
12:15 Defining the page items
13:09 Setting up the header with nextjs image property
15:45 Setting up custom background color
17:14 Setting up the game badges
25:37 Adding YouTube video with iFrame
35:20 Adding gameplay videos
43:01 Adding screenshots
47:21 Adding the game badges again
49:18 Conclusion

Get our games and related assets
itch.io - https://shepherdgames.itch.io
Codester - https://www.codester.com/sudeep98/shop
Construct - https://www.construct.net/en/game-assets/users/shepherdgames-152200
Gamedevmarket - https://www.gamedevmarket.net/member/shepherd-games/

You may contact us for any game development requirements or support for any game of our assets or any help with Construct 3 game logics
Email - contact@shepherd.games
Discord - https://discord.gg/WrMwKKEaUn
Website - https://www.shepherd.games

Follow us
Facebook - https://www.facebook.com/shepherdgames
Twitter - https://twitter.com/_shepherdgames
Pinterest - https://in.pinterest.com/shepherdgames
Instagram - https://www.instagram.com/shepherdgames
Twitch - https://www.twitch.tv/shepherdgames1

Support us
Paypal - https://paypal.me/shepherdgame
Patreon - https://www.patreon.com/shepherdgames
BuyMeACoffee - https://www.buymeacoffee.com/shepherdgames

#landingpage #howtobuildwebsite #gamepage

Loading comments...