The Landing Page

About "The Landing Page" by 23blocks

Why a Landing Page Project?
The internet has become too complicated and expensive. Remember the good old days? Just HTML, CSS, JavaScript, and voilà—a website. Now we’re drowning in frameworks, libraries, plugins, minifiers, CMSs, and 10,000 other distractions. We lost the way.

I needed a landing page—something simple to test ideas.

It had to live on a safe URL with SSL, under my domain.
I didn’t need 10,000 options. Neither do you.

Just the essentials:

A few images (maybe AI-generated).
A good copy (with some help from an LLM).
A nice, clean transition.
Super responsive.
Fast loading.

And no, I don’t want to pay every single month for Wix, Squarespace, or Framer. They’re great—if you love decision fatigue and overpriced hosting plans.

Let’s do the math:

Framer for 10 pages starts at $5/month per page. Add 50 interested users, and you’re looking at $15/month for 500 forms. Got 2,500 forms? Boom: $30/month per page.

Multiply that by 10 pages. That’s $300/month to maybe, someday, discover if your idea works. No, thank you.

I want to test 100 ideas, not 10.

Enter: The Landing Page by 23blocks

After some digging, I pulled together:

Open-source templates.
Webpack (for performance, not for pain).
A free GitHub account.
A free AWS account.

And boom—we have a lean setup to spin up landing pages fast, test fast, and (let’s be honest) fail fast.

How It Works

Start with a basic landing page template.
Host it on AWS Amplify with SSL and CDN (almost free).
Test your idea on a custom domain without breaking the bank.

No CMS. No Hugo. No JSON. Just old-fashioned HTML. Find the content, change it, done. Maybe let Copilot or Cursor AI help if you’re feeling fancy.

Want images? Drop them in a folder. Just make sure they’re the same size as the originals—don’t break my layout, please.

And don’t forget the header info. It’s all there. SEO, social sharing, you name it.

How to Use

How to Use this template

Create Your Own Repository from This Template
- Click the "Use this template" button on the repository page.
- Name your new repository (e.g., MyLandingPage).
- Choose whether to make it public or private.
- Click "Create repository from template".

Clone your own repository

git clone git@github.com:YourUserName/MyLandingPage.git

Go to the folder:

cd MyLandingPage

Install Node dependencies (yes, you need Node (version 22 works, use nvm for good sake. Tip: We add .nvmrc, so you can just run nvm use)):
```
nvm use
npm install  
```
Run the local development server:
```
npm start  
```
Preview changes live in your browser

How to Build and Test

Build the project:
```
npm run build  
```
Test the build as it will appear on the internet:
```
npx http-server dist  
```

How to Change the Landing Page Content

Open the HTML file.
Change the text and links—just like the old days.
Replace placeholder images in the images folder. Same size, remember?
Update the metadata in <head> for modern internet magic.

Designer Guide

Everything you need to tweak and manage this page lives inside the <section> divs.
Not using a section? Delete it. Want to move things around? Go for it. (But first, check the Marketing Guide to make sure you’re not ditching a key piece of the puzzle.)

There are two main building blocks here: Spotlight and Wrapper. Think of these as cards—move them, stack them, or leave them as-is (recommended for speed).

Spotlight

<section id="casestudies" class="spotlight style3 bottom">

Use Case: Great for sections that need a background image or specific positioning for the content.
Customization: Decide if the content appears at the bottom, right, or left using style#.
Navigation: Comes with handy navigation arrows for scrolling between sections.
Pro Tip: Double-check your section IDs (e.g., #casestudies) and make sure navigation links point to the correct hashtags. Nothing kills the vibe like broken navigation.

Wrapper

<section id="four" class="wrapper style1 special fade-up">

Use Case: Ideal for sections without navigation arrows or those with longer content that doesn’t fit the predefined container.

Marketing Guide

The whole point of this Landing Page is simple: remove the decision fatigue. We’ve done the homework for you, so you don’t have to spend hours debating layouts, fonts, or which shade of orange converts best.

This template is built on proven best practices—everything you need for a high-performing landing page, and nothing you don’t. Every section is crafted to guide your visitors from curious to convinced, with minimal effort on your part.

Here’s what’s included and why each one matters:

1. Header

The navigation hub.
Every landing page needs a clean header with easy-to-scan links. Keep it simple: logo on the left, key links in the middle, and a bold call-to-action (Sign Up, anyone?) on the right. Don’t overwhelm—this is not your LinkedIn profile.

2. Banner (Hero Section)

This is your "wow" moment.
Grab attention with a bold headline, a quick punchy subhead, and a killer visual that screams: “This is what you’re here for.” Top it off with a simple button or scroll prompt (you know, the thing you actually want people to click).

3. Social Proof

Because trust sells.
People trust other people—not just you. Add testimonials, stats, or logos that scream credibility. “This helped us grow 300%!” is a lot better than “Trust us.”

4. Benefits

Why should they care?
Break it down for them. What’s in it for them? Use bold headers and punchy text for each benefit. No essays here—nobody has time for that. Pro tip: Pair benefits with icons for extra oomph.

5. How It Works

Show them the magic.
People don’t want to guess. Walk them through your process in 3 simple steps (not 12). Visuals, icons, or diagrams help make it a no-brainer. Make it feel easy, even if it’s not.

6. Case Studies / Testimonials

Results over promises.
Don’t just tell them it works—show them. Add real-world examples, case studies, or user stories that prove your template delivers. Numbers and specifics win here.

7. FAQ

Answer their doubts before they even ask.
What’s holding them back? Is it cost, time, or effort? Answer these head-on in a simple Q&A format. Think of the most common questions your mom, friend, or coworker might ask—and solve them here.

8. Additional Call-to-Action (CTA)

Close the deal.
Hit them with a clear, direct CTA. “Get Started Now” or “Launch Your Landing Page Today” beats “Learn More” any day. Make this button stand out—it’s doing the heavy lifting.

9. Footer

The unsung hero of navigation.
It’s where the details live: social links, policies, contact info, and maybe a bonus CTA. Keep it functional, not fancy. Nobody’s here to admire your footer design.

Advanced Use

Want to take things to the next level? You can easily transform this landing page into a multi-page website.

Here’s how:

Add a New Page: Create a new HTML file for your additional page.
Update Webpack: Include your new file in the Webpack configuration. This ensures it gets built and optimized with the rest of your site.
Link It: Add the new page to your menu or navigation links.

And just like that—boom—you’ve got a multi-page website! Whether it’s for FAQs, a blog, or a pricing page, the setup is quick and seamless.

How to Deploy

Choose your deployment platform based on your needs. All options below are either completely free or have generous free tiers perfect for landing pages.

⚡ Zero-Friction Deployment (Recommended)

23blocks Platform - Deploy in 30 Seconds

One command. Zero hassle. 200% less friction.

npm run deploy

That's it. No account setup on multiple platforms, no config files, no waiting.

✅ Fastest deployment: 30 seconds from command to live URL
✅ One command: npm run deploy does everything
✅ No GitHub required: Deploy directly from your machine
✅ No config files: Zero configuration needed
✅ Instant URL: Get username.project.23blocks.com immediately
✅ Free tier available: Perfect for testing ideas
Best for: Anyone who wants to deploy NOW without setup friction

→ Read the full 23blocks deployment guide

🚀 Traditional Free Options

| Platform | Cost | Bandwidth | Build Minutes | Best For | |----------|------|-----------|---------------|----------| | GitHub Pages | 100% Free | 100GB/month | Unlimited | Simplicity, GitHub users | | Cloudflare Pages | 100% Free | Unlimited 🎉 | 500/month | High traffic sites | | Netlify | Free tier | 100GB/month | 300/month | Forms, developer UX | | Vercel | Free tier | 100GB/month | 6,000/month | Speed, previews | | AWS Amplify | Free tier* | 15GB/month | 1,000/month | AWS integration |

*AWS Free tier lasts 12 months, then ~$2-5/month for typical landing pages.

TheLandingPage

Install / Use

README