Getting Started with Liftoff

Prerequisites

Before you begin, make sure you have the following installed on your machine:

Node.js 18 or later
A package manager: npm, pnpm (recommended), or yarn
Basic familiarity with Astro and Tailwind CSS

Installation

After purchasing Liftoff, you'll receive a ZIP archive containing the theme source code. Extract it to your preferred project directory and install the dependencies:

cd liftoff-theme
pnpm install

Then start the development server:

pnpm dev

Open http://localhost:4321 in your browser to see the theme in action.

Project Structure

The Liftoff theme follows a straightforward Astro project layout:

liftoff-theme/
├── src/
│   ├── pages/
│   │   └── index.astro        # Main landing page
│   └── components/
│       └── themes/liftoff/     # Reusable components
├── public/
│   ├── favicon.svg
│   └── og/
│       └── default.png        # OG image
├── astro.config.mjs
└── package.json

Customizing Brand Colors

Liftoff uses Tailwind CSS v4's @theme directive to define brand colors as CSS custom properties. Open src/pages/index.astro and find the @theme block:

@theme {
  --color-brand-50:  oklch(97% 0.02 250);
  --color-brand-500: oklch(55% 0.22 250);
  --color-brand-600: oklch(47% 0.22 250);
  /* ... */
}

Change the hue value (the last number in each oklch() call) to shift the entire color palette. For example, changing 250 to 160 gives you a green-based palette.

Updating Your Content

All the copy in Liftoff is located directly in the Astro template files — no CMS required. Find the section you want to update and edit the text inline. Key sections:

Hero: headline, subheading, and CTA button labels
Features: six feature cards with icons, titles, and descriptions
Pricing: three pricing tiers with labels and feature lists
Testimonials: customer quotes and attribution
FAQ: accordion-style questions and answers

Building for Production

When you're ready to deploy, run the build command:

pnpm build

The optimized output will be in the dist/ folder. Deploy it to any static host — Vercel, Netlify, Cloudflare Pages, or any CDN that serves static files.

Deploying to Vercel

Push your project to GitHub, then import it into Vercel. No configuration needed — Vercel auto-detects Astro projects.

Deploying to Cloudflare Pages

Connect your GitHub repository in the Cloudflare Pages dashboard. Set the build command to pnpm build and the output directory to dist.

Next Steps

Now that you have Liftoff running locally, here are some things to try:

Swap the brand color hue to match your product's palette
Replace placeholder text with your real product copy
Update the pricing section with your actual plans
Add real customer testimonials
Set up your domain and deploy

If you run into any issues, check the Liftoff theme page or reach out via the support channel included with your purchase.