Day 12: Our first landing page - shipping ugly but functional
Day 12 of 30. Today we show the world what we're building.
Day 12 of 30. Today we show the world what we’re building.
We’ve spent 11 days building infrastructure with zero public presence, besides this blog. If we got hit by a bus tomorrow, this project would vanish without a trace.
It’s time to fix that. Today we ship a landing page. Minimal, but real.
What a landing page needs to do
At minimum:
- Explain what our service offers. Screenshot API. Capture any webpage. Simple.
- Show it’s real. For example, a small demo, example output, something tangible.
- Capture interest. Email signup or “get started” button.
- Build trust. Pricing, basic docs, who’s behind this.
The main goal of our landing page is that we’re trying to validate that anyone cares about this product, besides us.
The tech: keep it simple
We have a React frontend, which we created with the help of our favorite LLM tools. There’s no backend, it’s just a frontend for now, since our goal is to keep things simple.
Yes, we could have used an off the shelf product, or some other SaaS offering, but for now, this is what worked for us.
Build your own landing page
Toggle sections on and off to see different landing page configurations:
Screenshot API for Developers
Capture any webpage as an image. Mobile, tablet, desktop. Fast, reliable, affordable.
The copy
We spent an hour on this. Here’s what we landed on:
Headline: Screenshot API for developers
Subhead: Capture any webpage as an image. Mobile, tablet, and desktop. Fast, reliable, and affordable.
Value props:
- 🚀 Screenshots in 2-3 seconds
- 📱 Mobile, tablet, and desktop views
- 🔒 No browser management headaches
- 💰 Starts at $0 - pay as you grow
CTA: Get your API key - it’s free
We avoided jargon. No “leveraging cutting-edge headless browser technology.” Just plain language about what it does.
The design
We’re using Tailwind, so the design is essentially “default Tailwind with minor tweaks.”
Layout:
- Hero section with headline, subhead, CTA button
- Feature cards
- Pricing section (teaser)
- Testimonials
- Footer with links
Colors: White background, blue accents, dark text. Clean and boring.
Pricing teaser
Our first version was a standard 3 column pricing block, but the challenge was that it didn’t provide the right amount of info, such as the features, the support levels, and the difference between the different plans.
So, instead of having an inline pricing teaser, we made a dedicated page.
Feel free to check it out, and because we really appreciate you reading our blog, and following our journey, we have a promo code which will give you a 50% discount on checkout for a year. The discount code is ALLSCREENSHOTSDEV, and this can be applied to any plan.
For the actual price we’re charging, we should probably write a whole new blog on this, but we’ve tried to find a balance between our costs, what we think the service is worth, and what our competitors are charging. We hope to provide a compelling offer like this.
In Australia, there’s something called The Pub Test:
The “pub test” is an Australian slang term for a common-sense check on whether a policy, idea, or person seems fair, reasonable, and understandable to the average person in a pub setting. If something doesn’t “pass the pub test,” it means ordinary people would likely find it illogical, or unfair. It’s a litmus test of public opinion, gauging authenticity and common sense against everyday life.
We hope our pricing model passes the Pub Test, and expect a few special deals while we launch.
What we didn’t include
Detailed documentation. Coming later. For now, just the basics.
Blog. Allscreenshots.dev serves a different purpose - it’s more of a meta blog about building Allscreenshots.com.
Testimonials. We have zero customers. We don’t want to fake it.
Fancy animations. We’ll add some basic ones later to make the page feel alive.
Deploying the landing page
The React app builds to static files. We’re serving it via Nginx in Docker:
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.confThe CI/CD pipeline we built on day 4 handles the rest. Push to main, wait a few minutes, and it’s live. It’s simple, and it works well for us.
The moment of truth
We deployed. We visited the URL. It loaded! (Okay, after we fixed our Cloudflare setup, some Docker configuration, and some other small items… but let’s not bore you with all the details).
We now have a real landing page in which we can explain our real product.
It’s not beautiful. The copy could be better, and a lot of features are missing. But it exists!
Sharing it (nervously)
We posted in a few places:
- Tweet: “Building a screenshot API in public. Day 12: finally have a landing page.”
- Indie Hackers: Short post in the “showcase” section
- Dev.to: Cross-posted day 1 of this series with a link
Total reach: maybe 50 people. But it’s a start.
What we built today
- Complete landing page with hero, features, demo, pricing
- Live demo widget with rate limiting
- Deployed and publicly accessible
- Shared in 3 communities
This project is now real. People can find it, read about it, and hopefully get excited!
Tomorrow: authentication
Tomorrow, day 13, we build user accounts and API key management. Our landing page has a “sign up” button - we should make it do something.
Book of the day
Don’t Make Me Think by Steve Krug
The classic book on web usability, now edition 3! Krug’s core message: every page should be self-evident. Users shouldn’t have to think about how to use your site.
For our landing page, this meant: clear headline, obvious CTA, demo that works without explanation. No clever navigation, no hidden features, no marketing speak.
The book is short, funny, and full of practical advice. Even if you’re not a designer, it will change how you think about building web pages. Essential reading for anyone shipping products.