• What is MiniLanding ?
• Live Demos
• Installation
  • Start Environment locally
  • Build For Production
• Configuration
  • Main Page
  • Sub Pages
  • Assets
  • Page Object Configuration
    • Title
    • Sections
      • Gradients
      • CTA
    • Footer
      • Footer Sections
      • Social
    • Contact Form

MiniLanding is a minimalistic vue.js/tailwind.css based static landing page generator. Its no-code approach allows for quick and simple landing page generation.

The following websites are built using MiniLanding:

timekadel.com - Timé Kadel's personal website

Feel free to contact me if you'd like to see your MiniLanding implementation listed above.

Browse to the path of your choice and run the following command from a terminal:

$ git clone https://github.com/timekadel/mini-landing.git

Get to the project's root.

$ cd mini-landing

Install package dependencies.

$ npm install

Serve your MiniLanding instance on a local server.

$ npm run serve

Simply browse to the served URL using your favorite browser.

Build your static landing page from source.

$ npm run build

Built files will be located over the local ./dist folder located at project root.

MiniLanding allows for up to 1 level of depth. Sub pages are configured similarily to minilanding's main page and can be referenced as redirecition paths on the main page's sections CTAs.

Minilanding's main page must be configured using provided preset file:

project_root/
├─ src/
│  ├─ minilanding/
│  │  ├─ index.js

In order to create a new subpage, simply create a new javascript file within the sub folder:

project_root/
├─ src/
│  ├─ minilanding/
│  │  ├─ index.js
│  │  ├─ sub/
│  │  │  ├─ sub_page.js
│  │  │  ├─ sub_page_2.js
│  │  │  ├─ index.js

For subpages to be referenced in configuration files, you'll need to edit the index.js file under the sub folder to provide subpage configuration to MiniLanding's core with a uniquely identifiable name:

import sub_page_one from "./sub_page.js"
import sub_page_two from "./sub_page_2.js"

export default {
  sub_page_one,
  sub_page_two,
}

Referenced assets should always be provided into the project's static assets folder. In the following example, logo_name.png can be refferenced from a configuration file by providing the string path /path_to_asset/asset.extension

project_root/
├─ public/
│  ├─ path_to_asset/
│  │  ├─ asset.extension

MiniLanding websites are exclusively configured through simple object definitions. No HTML|JS|CSS Needed. MiniLanding is thought to be a Quick and Easy way to generate minimalistic static landing pages. Pages come with a set of pre-defined feature that allow for quick and easy content generation:

export default {
  logo: "/path_to_asset/logo.svg",
  title: "My cool page",
  sections: SECTIONS_CONFIGURATION,
  footer: FOOTER_CONFIGURATION
}

The string provided within the title parameter affects the document's title property.

Sections are part of MiniLanding's key features. They're used to describe uniquely configurable page sections in a matter of minutes. Sections comes with the following set of configurations:

[
  {
    name: "Section1",
    toolbar: true,
    gradient:GRADIENT_CONFIGURATION,
    icon: "flash-outline",
    title: "My Cool Section",
    subtitle: "Here is a <b>cool</b> section I made <b>myself</b>",
    hero: "/assets/hero_section1.png",
    cta: CTA_CONFIGURATION,
    light: false,
    color: "#0E0E0E"
    ltr: false,
  },
  //Next sections configurations
]

You may pick and configure a gradient from the gradient's preset list or generate your very own. The gradient configuration object comes with the following editable parameters:

gradient:{
  preset: "DISCRETEPURPLE2",
  reverse: false,
  fadeOut: false,
  //custom parameter cannot be coupled with preset and vice-versa.
  //custom: ["#85359c08", "#85359c15","#9C359A00", "#5A359C00"],
},

Section's call to actions objects can be configured in three unique ways:

• Smoothly scroll to an existing page's section
• Change route to pre-configured subpage/page
• Link to external resources/links

cta: [{
  title: "view next",
  filled: false,
  to: "#Section2"
},
{
  title: "view subpage",
  filled: true,
  to: "/aboutMe"
},
{
  title: "external link",
  filled: false,
  to: "https://domain.com"
}]

MiniLanding's pages footers contain information relative to the page's content and author and provides useful section-ordered lists of useful links such as credits, Terms of services. A page's footer can be configured as follows:

footer: {
  logo: "/path_to_assets/footer_logo.svg",
  name: "My Cool Page",
  slogan: "That's a cool landing page for sure !",
  copyright: "2022 John Doe",
  sections: SECTIONS_CONFIGURATION,
  social: SOCIAL_CONFIGURATION
}

Footer sections are used in order to display a set of links on the page's footer.

sections: [
  {
    name: "About",
    items: [{
        name: "Repository",
        to: "https://github.com/user/repository"
      },
      {
        name: "Get in touch",
        to: "mailto:contact@domain.com"
      }
    ]
  },
  //Next footer sections
],

{name:String,to:String} 

Here is a basic example of footer sections configuration

You may opt to display one or many of the following social link on your footer:

• Linkedin
• GitHub
• Facebook
• Twitter

Social links should be configured as follow:

social: {
  github: "https://github.com/github_profile",
  linkedin: "https://fr.linkedin.com/in/linkedin_id"
  facebook: "https://www.facebook.com/profile.id"
  twitter: "https://twitter.com/TwitterId",
}

Finally, you may opt to display a contact section over which anyone can send you messages through FormSubmit.

contact: {
  title: "Get in touch",
  subtitle: "Hello World! Lets get in touch.",
  icon: "message-circle-outline",
  formSubmitUrl: "https://formsubmit.co/ajax/my_formsubmit_id",
  toolbar: true,
},