Astrolify

Astrolify is an Astro-powered SaaS landing page template that centralizes all page content in a single TypeScript config file and ships with dark/light mode, a scroll-snap slider, and zero JavaScript frameworks beyond vanilla TS. It's built for developers who want a fast, type-safe marketing page without assembling components from scratch.

What is Astrolify?

Astrolify is a single-page SaaS landing template built with Astro, the static-first framework with island architecture. It takes your brand, navigation, hero, stats, features, pricing, testimonials, FAQ, and footer content from src/config/site.config.ts and renders them as a production-ready HTML site with no runtime framework needed. The template is released under the MIT license.

What makes Astrolify stand out?

• Single-file configuration — All text, links, and section data for brand, navigation, hero, stats, logo cloud, features, pricing, testimonials, FAQ, and footer live in src/config/site.config.ts, so you can restyle the whole page without touching a single component.
• Astro with TypeScript — The template uses Astro components (one per section) and type-safe config to catch errors at build time.
• Zero JS frameworks — No React, Vue, or Svelte runtime; interactivity (slider, theme switch, accordion, tabs) is handled with vanilla TypeScript for progressive enhancement.
• CSS design tokens — Styling is built on CSS custom properties (the --ac-* token names), with no Tailwind CSS dependency.
• Dark/light mode — The site defaults to the OS color scheme via prefers-color-scheme and includes a header toggle; an inline script applies the theme before first paint to avoid flash.
• Scroll-snap slider — A CSS scroll-snap slider is included (presumably for testimonials or logo cloud) with no external library.
• Clear project structure — Organized folders for components, config, data (icon paths), layouts, pages, styles (globals.css), and utils make it easy to extend.
• MIT license — Free to use in personal and commercial projects with no attribution requirement.

Who is it for?

• SaaS founders — Launch a landing page quickly by editing the config file instead of building the page structure.
• Front-end developers — Use it as a starting point for a client project; the Astro island architecture and vanilla TS keep the bundle small and maintainable.
• Designers who prototype — Adjust the CSS custom properties to match a brand and preview changes with live reload.

What can you do with Astrolify?

• Set up a product landing page — Replace the placeholder hero, features, pricing, and FAQ content in the config file to match your SaaS offering.
• Customize theming without build config — Change colors and spacing via the --ac-* CSS variables, then toggle dark/light mode to see the result.
• Integrate with your own stack — Because it's vanilla Astro, you can add islands (like a React widget) or connect a headless CMS later without replacing the template.

How does Astrolify work?

Install dependencies with npm install, then run npm run dev to start the dev server at localhost:4321. Edit src/config/site.config.ts to update the page content; the change appears immediately due to Astro's hot reload. For production, run npm run build to type-check and output static files to ./dist, then preview with npm run preview.

FAQ

Is Astrolify free?

Yes, Astrolify is released under the MIT license, so you can use it for free in personal and commercial projects without paying a fee or providing attribution.

Do I need to know React or another framework to use Astrolify?

No. Astrolify uses Astro and vanilla TypeScript for interactions. If you know HTML, CSS, and a bit of TypeScript, you can edit the config file and run the template.

How do I change the site's content?

Open src/config/site.config.ts. This file contains the brand, navigation, hero, stats, logo cloud, features, pricing, testimonials, FAQ, and footer data. Edit the exported object and save; the page updates automatically.

Does Astrolify support dark mode?

Yes. By default the page follows the operating system's color scheme via prefers-color-scheme. Users can override it with the theme toggle in the header, and the choice persists because the theme is applied synchronously in the head to avoid flash.