Home

Awesome

Free Landing page templates

Contains free and open-sourced website templates, including but not limited to SaaS landing page, portfolio, Restaurant page and more. Useful, for freelancers, agencies, SaaS developers, and more.

Download from browsable page: https://awesome-landingpages.vercel.app/

Updated Regularly

New templates will be uploaded every month. Feel free to star this repository šŸŒŸ.

Have a generic template in mind?

Looking for a custom landing page?

Consider supporting open-source.

when you support my open-source, I get funds to keep writing more free and open-source projects.

ko-fi

Table of content

Font Tester extension.

If you need help with website typography, try Font Tester tool I created to help you with website fonts. It can help you preview and test 1000+ google fonts on any website :)

Hover preview VsCode extension

It can sometimes be hard to quickly modify templates created by someone else without visual cues, so to overcome this I have created a vscode plugin called Hover Preview.

Make sure to check that out.

Features of Landing page templates

Whom is this suitable for?

Why use website templates?

Honestly at the end of the day most client/customer don't care if you created your website from scratch or used a template, they just want their website running/ solve problem as quickly as possible.

Using website templates will save you hours of work, so you can start looking for clients or dedicate your time elsewhere.

Installation and setup

Installation and set up is same for almost all the templates

Downloading the folder

You can use the browsable page to download a specific repo: https://awesome-landingpages.vercel.app/

Cloning the folder you want

To clone a specific repo read this Stackoverflow answer

Folder structure

Almost all the folder structure is similar to below shown

.
ā””ā”€ā”€ Landingpage/
    ā”œā”€ā”€ assets/
    ā”œā”€ā”€ css/
    ā”‚   ā”œā”€ā”€ index.css
    ā”‚   ā”œā”€ā”€ tailwind-build.css
    ā”‚   ā””ā”€ā”€ tailwind.css
    ā”œā”€ā”€ index.html
    ā”œā”€ā”€ index.js
    ā”œā”€ā”€ tailwind.config.js
    ā””ā”€ā”€ readme.md

Setting up tailwind

  1. If you are planning to modify tailwind you must have node installed.

[!NOTE] If you don't want devDependencies, Install dependencies from .package.json not package.json, as package.json contains additional dev dependencies to help with types

2.Add a file called tailwind.config.js (Note: every folder has this file, with theme)

module.exports = {
	prefix: 'tw-',
	important: false,
	content: [
		"./**/*.{html, jsx, js}",
	],
	theme: {
		extend: {},
	},
	plugins: [],
}
  1. Now add postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-simple-vars": {},
    "postcss-nested": {}
  },
}
  1. You should also have a base tailwind file called tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
}

Also refer the official tailwind documentation

[!NOTE] For django developers: If you are using Django + tailwind see how to set up in this article: Adding tailwind to django

Running and building

  1. To run the tailwind use npm run start:tailwind
  2. To build the tailwind use npm run build:tailwind

During development add the following to head tag

<link rel="stylesheet" href="tailwind-runtime.css"><!--replace with path to your tailwind runtime-->

During production use

<link rel="stylesheet" href="tailwind-build.css"><!--replace with path to your tailwind build-->

Customizing

  1. You can start by changing the text.
  2. If you want to change the primary color, you can check the tailwind.config.js file, it contains a primary color, changing that would affect the colors in the page.
  3. index.css also contains variables and colors for button, input, change that file for changing the button colors and more.

Website Templates

Here's the list of website templates

SaaS landing pages

Saas landing pages

1. Simple Finance - [Live preview]

2. CelestialSaaS - [Live preview]

3. AI SaaS - [Live preview]

4. SaaSy Dark - [Live preview]

5. Pixa Ai - [Live preview]

App landing pages

app landing page

  1. Chatorigin - [Live preview]

  2. AiSales - [Live preview]

  3. Navigator - [Live preview]

  4. Traveler - [Live preview]

Restaurant landing page

restaurant landing page

  1. Bistro - [Live preview]

  2. Nutrio - [Live preview]

Real estate landing page

realestate landing pages

  1. Brick property - [Live preview]

Attorney landing page

lawyer landing page

  1. Law Group - [Live preview]

  2. Law Fire - [Live preview]

Portfolio

portfolio landing page

  1. Bella Youtuber - [Live preview]

  2. Jrdev - developers portfolio - [Live preview]

  3. Jamie - developers portfolio - [Live preview]

  4. Notion - portfolio - [Live preview]

NGO landing pages

Ngo landing page

  1. Project Africa - [Live preview]

Other website templates

carwash landing page

  1. Supreme Carwash - [Live preview]

Credits

Elements in the templates are taken from free to use sources

Images

Pexels.com - https://pexels.com Unsplash - https://unsplash.com Pixabay - https://pixabay.com

Icons

Brand logos from

https://brandfetch.com/