How to deploy your new landing page?

In this guide we'll cover how to deploy your app using Next.js and Vercel. This guide assumes you've already created your landing page using the Landing Genie platform and have the code ready to deploy.

You do not have to use Next.js and Vercel to deploy your landing page. You can use any other hosting provider and static site generator that you prefer.

The first thing you need to do is to initialise a git repository in your project folder. Then, you can create a new Next.js app with Tailwind CSS and DaisyUI by running the following commands:

git init
npx create-next-app@latest your-landing-page
cd your-landing-page
npm install daisyui

Then you will have to configure Tailwind CSS and DaisyUI in your project. You can follow the official documentation for Tailwind CSS and DaisyUI to do this. In short (if you've selected Tailwind CSS when you've initialised your Next.js project), you can add the following to your tailwind.config.js file:

plugins: [require('daisyui')],
    daisyui: {
        themes: [
            'your-chosen-theme',
        ]
    },

Copy your code from the Landing Genie platform and paste it the page.tsx file in the app directory. Your theme will be at the first div:

<div class="rounded-xl p-1 shadow-2xl" data-theme="your-theme"></div>

Make sure to remove the class from the first div.

Next you will need to replace all 'class=' with 'className=' in the code you've copied from the Landing Genie platform. Then you can add the images you need to the public folder in your project. This will include the social proof images and the generated logo. Afterwards replace the image components in the code with the images you've added to the public folder. The code will look like this:

<Image
    src="/your-image.png"
    alt="Your image"
    width={500}
    height={500}
>

You can now run your project with the following command:

npm run dev

Feel free to make any changes to the code, copy or images to make it your own. As well ensure that the links go to your desired locations.

You can now view your landing page at http://localhost:3000. Next you can deploy your landing page to Vercel by heading to the Vercel website and following the instructions there.

If you would like help with deploying your landing page, feel free to reach out to me at alexander.swan12@gmail.com.