Posted on Leave a comment

Wilcity Landing Page

As our promise on Wilcity Facebook Group, We will guide you to create your own Landing Page based on Wilcity Landing Tool.

After following our steps below, You can create a landing page looks like this:

Now, let’s do it.

Step 1: Downloading Wilcity Landing Tool

You can download the tool by clicking on me [sociallocker id=”1378″][/sociallocker]

Step 2: Installing NPM in wilcity-landing-tool folder

  1. Extract the downloaded file, you will see wilcity-landing-tool folder.
  2. Open your terminal -> Run cd command line to the wilcity-landing-tool folder

Step 3: Building Hero Section

  1. Now, opening wilcity-landing-tool with an editor like Sublime Text or NotePad++.
  2. Going to src -> axiosFaker -> section1.js -> This is Hero section. You can change title, button, video background here.

Step 4: Building other sections

It’s the same what you did with the Hero section, you can simply open section you want to use and modify it.

The order of section in the app folder it similar to its order on the Wilcity Landing page

Step 5: Building App page Sections

You can see the app sections under src -> axiosFaker -> app folder. To modify it, please do the same web

Step 6: Setting up Navigation

To setup navigation, please open src -> axiosFaker -> navigation.js, here you can add / remove / modify the menu item.

Step 7: Building Production Version and upload to your hosting

After completing everything, We will build the production version and upload it to your hosting.

To build the production version, please run the following command lines:

yarn build


npm run build

The product files will be added under wilcity-landing-tool -> build folder -> Uploading those files to your hosting.

We hope this tutorial will help to create your own landing page. If you get any issue while creating the landing page, feel free open a ticket on